/* Nodal design tokens — graphite precision: cool near-black slate neutrals, one brand/action accent (graphite blue), and the two states a validation tool can't do without: pass and fail, kept separate and used only on status chips. Amber survives as --power, the diagram's power-path color (copper heritage), no longer the app chrome. */ :root { --bg: #0b0d12; --bg-raised: #11141b; --surface: #12151c; --surface-hover: #181c25; --border: #232833; --border-strong: #333a47; --text: #e7eaf0; --text-secondary: #8f96a5; --text-tertiary: #5a6272; --accent: #5ea1ff; --accent-bright: #7db4ff; --accent-dim: rgba(94, 161, 255, 0.12); --accent-border: rgba(94, 161, 255, 0.35); --power: #e5a93d; --power-bright: #f2bb5c; --power-border: rgba(229, 169, 61, 0.35); /* Net colours for the board diagram. Three hues is the most this surface carries — see the note in lib/diagram.ts and the validator run there. */ --net-power: #d95926; --net-bus: #3987e5; --net-bus-2: #199e70; --pass: #2fae72; --pass-dim: rgba(47, 174, 114, 0.12); --fail: #e5484d; --fail-dim: rgba(229, 72, 77, 0.12); /* Block-diagram category tags (Architecture page) — five hues from the dataviz skill's validated categorical order, checked against this app's dark surface: node validate_palette.js "#3987e5,#d55181,#c98500,#199e70,#9085e9" --mode dark --surface "#131519" → all checks pass. Deliberately excludes the palette's green/red slots (reserved by --pass/--fail elsewhere in the app) and uses --power (amber) for the power group instead of a 6th hue, since amber is the power edge/derived color on this diagram. */ --cat-sensing: #3987e5; --cat-comms: #d55181; --cat-actuation: #c98500; --cat-support: #199e70; --cat-ui: #9085e9; --radius: 8px; --radius-sm: 5px; } /* Outside Next — the exported design-system bundle, where this stylesheet ships on its own — next/font never runs, so nothing defines the two family variables. Name the real families as the floor; the @font-face rules that ship beside the stylesheet provide them. In the app, body's next/font values (set on the class Next attaches there) override these for everything under , so the hashed local families still win where they exist. */ :root { --font-manrope: "Manrope"; --font-jetbrains: "JetBrains Mono"; } /* next/font sets --font-manrope / --font-jetbrains on (via the class Next attaches there), not on :root — so the alias below must live on body too. Custom properties only cascade downward; defining it on :root (an ancestor of body) would leave the reference unresolved. */ body { --font-display: var(--font-manrope), sans-serif; --font-mono: var(--font-jetbrains), monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-display); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent-dim); color: var(--accent-bright); } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- header / pipeline nav ---------- */ header.app-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; height: 60px; background: rgba(11, 12, 14, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; letter-spacing: 0.02em; } .pipeline-nav { display: flex; align-items: center; gap: 0; } .pipeline-nav a { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); transition: color 0.15s ease, background 0.15s ease; } .pipeline-nav a .num { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; opacity: 0.7; } .pipeline-nav a .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); transition: background 0.15s ease, box-shadow 0.15s ease; } .pipeline-nav a.active { color: var(--text); background: var(--surface); } .pipeline-nav a.active .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .pipeline-rule { width: 20px; height: 1px; background: var(--border-strong); margin: 0 2px; } .header-cta { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); } /* ---------- header session picker ---------- */ .session-picker { position: relative; } .sp-trigger { display: flex; align-items: center; gap: 8px; max-width: 240px; padding: 7px 11px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .sp-trigger:hover { color: var(--text); border-color: var(--text-tertiary); } .sp-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); flex-shrink: 0; } .sp-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 460px; display: flex; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); z-index: 200; overflow: hidden; } .sp-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } .sp-new { border: none; background: transparent; color: var(--accent); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; } .sp-new:hover { color: var(--accent-bright); } .sp-error, .sp-empty { padding: 14px; font-size: 12.5px; color: var(--text-tertiary); } .sp-list { overflow-y: auto; } .sp-item { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 11px 14px; background: transparent; border: none; border-bottom: 1px solid var(--border); text-align: left; cursor: pointer; transition: background 0.12s; } .sp-item:hover { background: var(--surface-hover); } .sp-item.active { background: var(--accent-dim); } .sp-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .sp-item-label { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-item-time { flex-shrink: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); } .sp-item-meta { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); } .sp-id { color: var(--text-tertiary); } .sp-badge { padding: 1px 5px; border-radius: 3px; background: var(--accent-dim); color: var(--accent-bright); border: 1px solid var(--accent-border); letter-spacing: 0.05em; } .sp-blocks { color: var(--text-secondary); } .sp-stages { display: inline-flex; gap: 3px; margin-left: auto; } .sp-stage { width: 6px; height: 6px; border-radius: 2px; background: var(--border-strong); } .sp-stage.done { background: var(--pass); } /* ---------- page / section scaffolding ---------- */ main.stage { min-height: calc(100vh - 60px); padding: 56px 28px 96px; max-width: 1240px; margin: 0 auto; } .eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 16px; } .eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--accent); } .eyebrow .preview-tag { margin-left: auto; color: var(--text-tertiary); font-weight: 400; letter-spacing: 0.04em; } .eyebrow .test-tag { color: var(--accent-bright); background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: 3px; padding: 2px 8px; } /* Dev-only banner: dashboard is rendering a frozen spec snapshot. */ .test-banner { background: var(--accent-dim); border: 1px solid var(--accent-border); border-left: 2px solid var(--accent); border-radius: 4px; padding: 10px 14px; font-size: 13px; color: var(--text-secondary); margin: -28px 0 24px; max-width: 720px; } /* The negative top margin tucks the banner under the page eyebrow. Inside a rendered document it has a header above it instead, and the pull-up landed the banner on top of the header's own meta line. */ .espec-doc .test-banner { margin-top: 0; } h1.stage-title { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; max-width: 640px; margin-bottom: 12px; } p.stage-sub { font-size: 15px; color: var(--text-secondary); max-width: 560px; margin-bottom: 44px; } .btn { cursor: pointer; border: none; font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: var(--radius-sm); text-align: center; transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.45; cursor: default; } .btn-accent { background: var(--accent); color: #1a1305; } .btn-accent:hover:enabled { background: var(--accent-bright); } .btn-ghost { background: var(--surface); color: var(--text-secondary); border: 1px solid var(--border-strong); } .btn-ghost:hover:enabled { color: var(--text); border-color: var(--text-tertiary); } /* ---------- panels (shared scaffolding) ---------- */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); gap: 12px; } .panel-head-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--text-tertiary); text-transform: uppercase; } /* ---------- Stage 1: entry-point chooser ---------- */ .intake-chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 820px; } .intake-option { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-display); text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .intake-option:hover { background: var(--surface-hover); border-color: var(--accent-border); } .intake-option-title { font-size: 15.5px; font-weight: 600; } .intake-option-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; } @media (max-width: 720px) { .intake-chooser { grid-template-columns: 1fr; } } /* Validation page: prototype-vs-selection comparison note */ .proto-note { margin-bottom: 8px; padding: 8px 10px; font-size: 13px; color: var(--text-secondary); background: var(--accent-dim); border-left: 2px solid var(--accent); border-radius: var(--radius-sm); } /* ---------- Stage 1/2: spec block diagram (Architecture page) ---------- */ .diag { display: block; cursor: grab; } .diag.dragging { cursor: grabbing; } .diag-node { cursor: pointer; } /* The regulation placeholder is informational, not a spec block — no click. */ .diag-node.placeholder { cursor: default; } /* Region bands: one dashed, boxed unit per zone (INPUTS / OUTPUTS / POWER / COMMS / TESTING). Each outline and label take the group's own tag color so the box, the per-node tag, and the legend all read as one system; only power keeps amber. The color is set per-group below via --region-hue. */ .diag-region rect { fill: color-mix(in srgb, var(--region-hue) 6%, transparent); stroke: color-mix(in srgb, var(--region-hue) 55%, transparent); stroke-dasharray: 5 4; } .diag-region text { fill: var(--region-hue); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; } .diag-region.cat-inputs { --region-hue: var(--cat-sensing); } .diag-region.cat-outputs { --region-hue: var(--cat-ui); } .diag-region.cat-comms { --region-hue: var(--cat-comms); } .diag-region.cat-testing { --region-hue: var(--cat-support); } .diag-region.cat-power { --region-hue: var(--power); } .diag-node-box { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; transition: stroke 0.15s, fill 0.15s; } .diag-node:hover .diag-node-box { fill: var(--surface-hover); } .diag-node.selected .diag-node-box { stroke: var(--accent); stroke-width: 1.4; } .diag-node.derived .diag-node-box { stroke-dasharray: 4 3; } /* Category tag: a slim colored bar on the node's left edge, so a block's function group (sensing/comms/actuation/support/ui/power) reads at a glance without parsing every label. See --cat-* tokens for the validated palette; power reuses --accent for continuity with the power edge color. */ .diag-node-tag { pointer-events: none; } .diag-node-tag.cat-inputs { fill: var(--cat-sensing); } .diag-node-tag.cat-outputs { fill: var(--cat-ui); } .diag-node-tag.cat-comms { fill: var(--cat-comms); } .diag-node-tag.cat-testing { fill: var(--cat-support); } .diag-node-tag.cat-power { fill: var(--power); } /* Focus a block's wiring on hover/select: everything not directly connected to the active node fades back so its actual connections stand out on a busy board. */ .diag-node, .diag-edge, .diag-edge-tag { transition: opacity 0.15s; } .diag-node.dimmed { opacity: 0.35; } .diag-edge.dimmed, .diag-edge-tag.dimmed { opacity: 0.25; } /* Processing core: the hub, visually weightier than its peripherals. */ .diag-node.core .diag-node-box { fill: var(--bg-raised); stroke: var(--text-secondary); stroke-width: 1.4; } .diag-node.core:hover .diag-node-box { fill: var(--surface-hover); } .diag-node.core.selected .diag-node-box { stroke: var(--accent); } /* The core's name carries more weight than a peripheral's. */ .diag-node.core .diag-node-name { font-size: 13px; fill: var(--text); font-weight: 600; } /* Reference designator: a small corner marker cross-referencing the cards below, deliberately quiet so the block's name reads first. */ .diag-node-refdes { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.03em; fill: var(--text-tertiary); } /* The block's plain-language name — the primary label on each node. */ .diag-node-name { font-family: var(--font-sans, inherit); font-size: 11.5px; font-weight: 550; fill: var(--text); } .diag-node-proto { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; fill: var(--accent-bright); } .diag-node-status { fill: var(--accent); } .diag-node.complete .diag-node-status { fill: var(--pass); } .diag-edge { stroke: var(--border-strong); stroke-width: 1.2; } .diag-edge-power { stroke: var(--power-border); stroke-width: 1.4; } .diag-arrowhead { fill: var(--border-strong); } .diag-arrowhead-power { fill: var(--power-border); } /* Edge tag: a pill sitting on the wire, like a schematic net label — the background-colored pill interrupts the line so the text is never struck through, without needing a text halo or an off-line offset. */ .diag-edge-tag { pointer-events: none; } .diag-edge-pill { fill: var(--surface); } .diag-edge-label { font-family: var(--font-sans, inherit); font-size: 9.5px; fill: var(--text-secondary); } .diag-edge-label.power { fill: var(--power-bright); } /* IC glue inserted on an edge by the repair pass (level shifters, isolators): a small node sitting ON the wire it conditions. Dashed until a real part is selected for it — same "derived, not yet a part" language as derived rails. */ .diag-glue { transition: opacity 0.15s; } .diag-glue.dimmed { opacity: 0.25; } .diag-glue-box { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; } .diag-glue.unresolved .diag-glue-box { stroke-dasharray: 3 3; } .diag-glue-name { font-family: var(--font-sans, inherit); font-size: 9.5px; fill: var(--text-secondary); } .diag-glue.unresolved .diag-glue-name { fill: var(--text-tertiary); } .diag-glue-refdes { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.03em; fill: var(--text-tertiary); } /* Pan/zoom hint pinned under the diagram, outside the zoom transform. */ .diag-hint { font-family: var(--font-sans, inherit); font-size: 9px; fill: var(--text-tertiary); pointer-events: none; user-select: none; } /* ---------- Stage 1: chat ---------- */ .chat-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; align-items: start; } /* Conversation-first requirements flow: while the spec is being gathered the chat stands alone, centered; the summary panels take over afterwards. */ .chat-solo { max-width: 780px; margin: 0 auto; } .chat-solo .thread { min-height: 52vh; max-height: 64vh; } .phase-switch { margin-top: 10px; text-align: right; } .phase-switch a, .phase-switch-link { color: var(--accent); font-size: 13px; } /* Review phase: Board overview + change chat on the left, Functional requirements on the right — the chat fills the height difference so the two columns land roughly level instead of leaving a hole. */ .agreed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; align-items: start; } .agreed-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; } /* Compact change-request chat: the same conversation, full history included, just short and scrollable. */ .chat-compact .thread { min-height: 140px; max-height: 300px; } .review-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } /* Gated generate button: visible but clearly not ready — clicking it earns the bot's nudge instead of doing nothing. */ .gate-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .btn-gated, .btn-gated:hover { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .gate-notice { max-width: 420px; font-size: 13px; line-height: 1.5; color: var(--accent-bright); background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: 10px; padding: 9px 14px; } .chat-panel { display: flex; flex-direction: column; min-height: 0; } /* Right column: the "what this board does" summary. */ .spec-column { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .board-summary-body { padding: 16px 18px; } .board-summary-overview-label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; } .board-summary-body p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); } .board-summary-body p.board-summary-empty { color: var(--text-tertiary); font-style: italic; } /* Board-level constraint categories — power/form-factor/budget/compliance/ quantity, each a distinct spec dimension that shapes every downstream stage. Hairline dividers via a 1px background gap read as an instrument readout rather than a form. */ .board-summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); } .board-summary-stat { padding: 12px 16px; background: var(--surface); display: flex; align-items: center; gap: 11px; } .board-summary-stat-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; } .board-summary-stat-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .board-summary-stat-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } .board-summary-stat-value { font-size: 13px; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; } /* Interfaces — the board's I/O-facing blocks (what it senses, drives, shows, talks over), shown as their own labelled band of icon tiles below the board-level constraints. */ .board-summary-interfaces { border-top: 1px solid var(--border); } .board-summary-section-label { display: block; padding: 11px 16px 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } /* Interfaces split into the buckets a product person reasons in — Inputs / Outputs / Communication. The buckets sit side by side as columns (Inputs next to Outputs; hairline dividers via the 1px grid gap), and each bucket lists its tiles vertically under a labelled strip. */ .board-summary-iface-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); } .board-summary-iface-group { background: var(--surface); } .board-summary-iface-list { display: flex; flex-direction: column; } .board-summary-iface-list .board-summary-stat { padding: 9px 16px; } .board-summary-iface-domain { display: block; padding: 7px 16px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); background: var(--bg-raised); border-bottom: 1px solid var(--border); } /* Interface tile: a short type headline ("Wi-Fi") over the block's conversational role ("cloud AI voice assistant"). Inverse hierarchy from the constraint tiles, where the mono label sits on top. */ .board-summary-iface-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; } .board-summary-iface-role { font-size: 11px; line-height: 1.35; color: var(--text-secondary); overflow-wrap: anywhere; } /* Live functional-requirements list on the Requirements page — each plain- English need the chatbot derives, grouped by the high-level thing the board must do, growing turn by turn. The electrical spec each need becomes is kept off this card (it lives on Architecture). The count badge in the head reads as a running tally of what's been understood so far. */ .func-reqs-count { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-secondary); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; } .func-reqs-empty { padding: 16px 18px; font-size: 13px; line-height: 1.5; font-style: italic; color: var(--text-tertiary); } .func-reqs-body { display: flex; flex-direction: column; } .func-reqs-group { padding: 12px 18px 14px; border-top: 1px solid var(--border); } .func-reqs-group:first-child { border-top: none; } .func-reqs-group-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .func-reqs-block { font-size: 13px; font-weight: 600; color: var(--text); } .func-reqs-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); } .func-reqs-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } /* One plain-English need per row. The electrical spec it maps to lives on the Architecture page, not here — this card stays in the user's terms. Accent rule ties it to the "derived from your answers" framing. */ .func-reqs-item { font-size: 13px; line-height: 1.4; color: var(--text); padding: 7px 11px; background: var(--bg-raised); border: 1px solid var(--border); border-left: 2px solid var(--accent-border); border-radius: var(--radius-sm); } .thread { padding: 22px; display: flex; flex-direction: column; gap: 18px; min-height: 420px; max-height: 640px; overflow-y: auto; } .msg { display: flex; gap: 12px; max-width: 92%; } .msg.msg-user { align-self: flex-end; flex-direction: row-reverse; } .msg-avatar { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; margin-top: 2px; } .msg-assistant .msg-avatar { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-border); } .msg-user .msg-avatar { background: var(--bg-raised); color: var(--text-secondary); border: 1px solid var(--border-strong); } .msg-body { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 15px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; } .msg-user .msg-body { background: transparent; border-color: var(--border-strong); } .cursor { display: inline-block; width: 0.5em; height: 1em; vertical-align: text-bottom; background: var(--accent); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } .thinking { color: var(--text-tertiary); font-style: italic; animation: fade 1.4s ease-in-out infinite; } @keyframes fade { 50% { opacity: 0.4; } } .chat-error { font-family: var(--font-mono); font-size: 12px; color: var(--fail); background: var(--fail-dim); border: 1px solid rgba(229, 72, 77, 0.3); border-radius: var(--radius-sm); padding: 9px 13px; } .composer { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); } .composer textarea { flex: 1; resize: none; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 13px; color: var(--text); font-family: var(--font-display); font-size: 13.5px; line-height: 1.4; min-height: 40px; max-height: 160px; outline: none; transition: border-color 0.15s ease; } .composer textarea:focus { border-color: var(--accent-border); } .composer textarea::placeholder { color: var(--text-tertiary); } .block-questions { margin: 8px 0 0; padding: 0 0 0 16px; font-size: 12px; color: var(--text-secondary); } .block-questions li { margin: 2px 0; } /* Stage 02 — Architecture: full-width topology + functional→electrical review */ .arch-diagram-panel { margin-bottom: 20px; } /* The Architecture page is a one-screen workspace: compact header chrome so the diagram + detail split gets the viewport's remaining height and the whole review happens without scrolling. */ .arch-stage { padding-top: 16px; padding-bottom: 14px; } .arch-stage .stage-title { font-size: 24px; max-width: none; margin-bottom: 6px; } .arch-stage .stage-sub { max-width: 980px; margin-bottom: 18px; } .arch-stage .arch-cta { margin: 12px 0 0; } .arch-stage .arch-diagram-panel { margin-bottom: 0; } /* Diagram left, selected block's detail card right — a single row sized to the viewport so topology + card review happen without scrolling. */ .arch-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: stretch; /* Fill the viewport below the header/title/panel-head down to the CTA, so the whole board fits without scrolling. Offset ≈ fixed chrome height. */ --arch-h: clamp(340px, calc(100vh - 384px), 1200px); } /* The diagram SVG stretches to fill this box (preserveAspectRatio letterboxes it), so the height must stay definite — fallback for pages that render the wrap outside .arch-split. */ .arch-diagram-wrap { height: var(--arch-h, 560px); display: flex; align-items: stretch; justify-content: center; padding: 8px 14px; overflow: hidden; min-width: 0; } .arch-detail { height: var(--arch-h); overflow-y: auto; border-left: 1px solid var(--border); padding: 14px 16px; } /* MappingCard reuses .panel styling; inside the aside it's already framed, so strip the nested chrome. */ .arch-detail .arch-card { margin-bottom: 0; border: 0; background: transparent; } .arch-detail-empty { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-tertiary); font-size: 13px; font-style: italic; line-height: 1.5; padding: 0 28px; } /* Zoom-into-block: the diagram's content group eases between identity and the selected node scaled up + panned to center (see BlockDiagram). */ .diag-zoom { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } /* Direct manipulation (drag-pan, wheel-zoom) must track the pointer 1:1 — the easing is only for the select/deselect animation. */ .diag-zoom.no-anim { transition: none; } @media (max-width: 1100px) { .arch-split { grid-template-columns: 1fr; } .arch-detail { height: auto; max-height: 420px; border-left: 0; border-top: 1px solid var(--border); } } .arch-legend { display: flex; gap: 16px; font-size: 11px; color: var(--text-tertiary); } /* Legend entries are toggles: clicking one highlights its members in the diagram (button reset keeps the quiet legend look). */ .arch-legend-item { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 2px 7px; margin: -2px -7px; border-radius: 10px; font: inherit; color: inherit; cursor: pointer; } .arch-legend-item:hover { color: var(--text-secondary); } .arch-legend-item.active { background: var(--accent-dim); color: var(--accent-bright); } .arch-legend-swatch { width: 16px; border-top: 2px solid var(--border-strong); display: inline-block; } .arch-legend-item.signal .arch-legend-swatch { border-top-color: var(--accent); } .arch-legend-item.power .arch-legend-swatch { border-top-style: dashed; border-top-color: var(--power-border); } .arch-legend-categories { flex-wrap: wrap; margin-top: 6px; } .arch-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--text-tertiary); } .arch-legend-item.cat-inputs .arch-legend-dot { background: var(--cat-sensing); } .arch-legend-item.cat-outputs .arch-legend-dot { background: var(--cat-ui); } .arch-legend-item.cat-comms .arch-legend-dot { background: var(--cat-comms); } .arch-legend-item.cat-testing .arch-legend-dot { background: var(--cat-support); } .arch-legend-item.cat-power .arch-legend-dot { background: var(--power); } /* Standalone advisory above the architecture panel (not-generated / stale). */ .arch-note { margin-bottom: 18px; } .arch-note a { color: var(--accent); } /* Electrical-derivation loading state (arrived from Requirements) */ .arch-generating { display: flex; align-items: center; gap: 16px; padding: 22px 24px; margin: 8px 0 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .arch-spinner { flex-shrink: 0; width: 22px; height: 22px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: arch-spin 0.7s linear infinite; } @keyframes arch-spin { to { transform: rotate(360deg); } } .arch-generating-title { font-weight: 600; font-size: 14.5px; color: var(--text); } .arch-generating-sub { margin-top: 3px; font-size: 12.5px; color: var(--text-secondary); } .arch-generating-timing { margin-top: 6px; font-family: var(--font-jetbrains), monospace; font-size: 11.5px; letter-spacing: 0.02em; color: var(--text-tertiary, var(--text-secondary)); } @media (prefers-reduced-motion: reduce) { .arch-spinner { animation-duration: 1.6s; } } /* Step-to-step navigation at the foot of each pipeline page. The top nav can jump anywhere; this states what the NEXT step is and whether it can run yet, so the path forward doesn't depend on reading the header. */ .step-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid var(--border); } .step-nav-back { font-size: 13px; color: var(--text-secondary); } .step-nav-back:hover { color: var(--text); } .step-nav-forward { display: flex; align-items: center; gap: 12px; } .step-nav-why { font-size: 12.5px; color: var(--text-secondary); max-width: 46ch; text-align: right; } .arch-constraints { display: flex; flex-wrap: wrap; gap: 22px; padding: 12px 16px 4px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-secondary); } .arch-constraints em { color: var(--text-tertiary); font-style: normal; margin-right: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; } .arch-mapping-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); margin: 4px 0 10px; } .arch-card { margin-bottom: 14px; transition: border-color 0.15s; } .arch-card.selected { border-color: var(--accent-border); } .arch-card-head { display: flex; align-items: center; gap: 12px; cursor: pointer; margin-bottom: 12px; } .arch-card-head .status-badge { margin-left: auto; } .spec-table.arch-tiers .func-col { color: var(--text); max-width: 280px; } .spec-table.arch-tiers .elec-key { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); } .arch-questions { margin-top: 10px; } /* Derivation gaps, answerable in place rather than back in the chat. */ .arch-questions-panel { margin-bottom: 20px; border-color: var(--accent-border); } .arch-questions-panel .ref-note { margin: 4px 0 14px; } .arch-question + .arch-question { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .arch-question-block { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 4px; } .arch-question-text { display: block; font-size: 13.5px; color: var(--text); line-height: 1.45; margin-bottom: 8px; } .arch-question-answer { display: flex; gap: 10px; align-items: flex-start; } .arch-question-answer textarea { flex: 1; resize: none; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 13px; color: var(--text); font-family: var(--font-display); font-size: 13.5px; line-height: 1.4; outline: none; transition: border-color 0.15s ease; } .arch-question-answer textarea:focus { border-color: var(--accent-border); } .arch-question-answer textarea::placeholder { color: var(--text-tertiary); } .arch-question-answer textarea:disabled { opacity: 0.6; } .arch-power-note { margin: 4px 0 18px; } .arch-cta { display: flex; justify-content: flex-end; margin: 8px 0 40px; } .sheet-empty { border: 1px dashed var(--border-strong); color: var(--text-tertiary); font-size: 13px; padding: 18px; text-align: center; border-radius: var(--radius-sm); margin: 14px 18px; } /* Next-step links inside guidance copy (stage subtitle, empty states, toolbar meta) — must read as actions, not blend into the prose. */ .stage-sub a, .sheet-empty a, .selection-meta a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-border); } .stage-sub a:hover, .sheet-empty a:hover, .selection-meta a:hover { color: var(--accent-bright); text-decoration-color: var(--accent-bright); } /* ---------- Stage 2: validation / justification ---------- */ .just-cards { display: flex; flex-direction: column; gap: 18px; } /* Related-circuit cluster (amplifier + speaker, LED driver + LED, power rails): a titled container wrapping the member cards. */ .circuit-group { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-raised); padding: 14px; display: flex; flex-direction: column; gap: 14px; } .circuit-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 4px; } .circuit-group-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-tertiary); } .circuit-group-label { font-family: var(--font-display); font-weight: 600; color: var(--accent-bright); } .circuit-group-sub { font-size: 12px; color: var(--text-secondary); } .circuit-group-body { display: flex; flex-direction: column; gap: 14px; } /* Per-component "how it meets its specs" summary above the spec table. */ .spec-meets { display: flex; align-items: baseline; gap: 8px; padding: 8px 11px; margin-bottom: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text-secondary); } .spec-meets.all { border-color: var(--pass); background: var(--pass-dim); color: var(--text); } .spec-meets-icon { font-weight: 700; } .spec-meets.all .spec-meets-icon { color: var(--pass); } .spec-meets code { font-family: var(--font-mono); font-size: 12px; color: var(--text); } .just-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); gap: 16px; flex-wrap: wrap; } .just-head-left { display: flex; align-items: center; gap: 14px; } .just-refdes { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--text); background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 5px 10px; } .just-title { font-size: 15px; font-weight: 700; } .just-category { font-size: 12.5px; color: var(--text-tertiary); margin-top: 1px; } .status-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 5px 11px; border-radius: 999px; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .status-badge.pass { background: var(--pass-dim); color: var(--pass); border: 1px solid rgba(47, 174, 114, 0.3); } .status-badge.ref { background: var(--surface-hover); color: var(--text-secondary); border: 1px solid var(--border-strong); } .status-badge.running { background: var(--accent-dim); color: var(--accent-bright); border: 1px solid var(--accent-border); } .status-badge.pending { background: var(--accent-dim); color: var(--accent-bright); border: 1px solid var(--accent-border); } .status-badge.fail { background: var(--fail-dim); color: var(--fail); border: 1px solid rgba(229, 72, 77, 0.3); } .status-badge .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-badge.running .status-dot { animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .just-body { display: grid; grid-template-columns: 260px 1fr; } .just-identity { padding: 20px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; } /* LCSC photos come on a white field; keep that in dark mode too. */ .part-photo { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); } .id-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); letter-spacing: 0.06em; margin-bottom: 5px; } .id-mpn { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text); } .id-mfr { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; } .id-pkg { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary); margin-top: 6px; } .avail-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; } .tier-chip { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.03em; } .tier-chip.basic { background: var(--pass-dim); color: var(--pass); } .tier-chip.preferred { background: var(--accent-dim); color: var(--accent-bright); } .tier-chip.extended { background: var(--surface-hover); color: var(--text-secondary); } /* Secondary-sourced part (JLCPCB stocks nothing for the block): amber, since it changes the assembly path (consignment / hand assembly). */ .tier-chip.digikey { background: rgba(229, 169, 61, 0.12); color: var(--power); } .sourcing-note { margin-top: 6px; max-width: 240px; font-size: 11px; line-height: 1.45; color: var(--power); } .avail-detail { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); display: flex; justify-content: space-between; } .avail-detail .price { color: var(--text); } /* DigiKey lifecycle status: green when active, red for NRND/obsolete — the classic design-in mistake is picking a part on its way out. */ .tier-chip.lc-active { background: var(--pass-dim); color: var(--pass); } .tier-chip.lc-risk { background: var(--fail-dim); color: var(--fail); } .avail-detail .stock-low { color: var(--power); } .avail-row { display: flex; gap: 6px; flex-wrap: wrap; } /* Datasheet link + the section the app circuit was authored from. */ .ds-link { display: inline-block; margin-top: 7px; } .ds-section { margin-top: 4px; max-width: 240px; font-size: 11px; line-height: 1.45; color: var(--text-tertiary); } /* Design-margin column on the spec table. */ .spec-table .margin-col { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; } .margin-val.m-good { color: var(--pass); } .margin-val.m-tight, /* Clears only a typical value, not a guaranteed limit — needs the datasheet's tolerance before it can be called a pass. */ .margin-val.m-typ { color: var(--power); } .margin-val.m-low, .margin-val.m-neg { color: var(--fail); } .margin-qual { font-size: 10px; opacity: 0.8; } .margin-val.m-neg { font-weight: 700; } .margin-none { color: var(--text-tertiary); } /* Margin legend lives behind the ⓘ on the column header — the explanation is long and repeating it under every part tile crowded the panel. */ .spec-table th.margin-head { position: relative; white-space: nowrap; } .legend-btn { margin-left: 5px; width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10px; line-height: 1; cursor: pointer; vertical-align: middle; } .legend-btn:hover, .legend-btn[aria-expanded="true"] { border-color: var(--text-secondary); color: var(--text); } .legend-backdrop { position: fixed; inset: 0; z-index: 40; } .legend-pop { position: absolute; z-index: 41; top: calc(100% + 6px); right: 0; width: 340px; max-width: 70vw; padding: 12px 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); font-family: var(--font-sans); font-size: 11.5px; font-weight: 400; line-height: 1.55; color: var(--text-secondary); text-align: left; white-space: normal; } .legend-pop p + p { margin-top: 9px; } .legend-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } .legend-close { padding: 0 2px; border: none; background: transparent; color: var(--text-tertiary); font-size: 14px; line-height: 1; cursor: pointer; } .legend-close:hover { color: var(--text); } /* Why this part won: one card per runner-up, led by the decisive difference. */ .alt-reasons { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .alt-reason { border-left: 2px solid var(--border); padding: 2px 0 2px 12px; } .alt-reason.r-spec { border-left-color: var(--fail); } .alt-reason.r-integration, .alt-reason.r-build { border-left-color: var(--accent); } .alt-reason.r-supply, .alt-reason.r-cost { border-left-color: var(--power-border); } .alt-reason-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .alt-reason .alt-mpn { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); } .alt-reason .alt-verdict { font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-tertiary); } .alt-reason.r-spec .alt-verdict { color: var(--fail); } .alt-reason.r-supply .alt-verdict, .alt-reason.r-cost .alt-verdict { color: var(--power); } .alt-why { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); } .alt-favour { margin: 3px 0 0; font-size: 12px; color: var(--text-tertiary); } .alt-toggle { margin-top: 6px; background: none; border: none; padding: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--text-tertiary); cursor: pointer; } .alt-toggle:hover { color: var(--accent-bright); } /* Alternates comparison: winner column highlighted, table scrolls if wide. */ .alt-scroll { margin-top: 10px; overflow-x: auto; } .alt-table th, .alt-table td { padding-right: 16px; } .alt-table th.alt-winner, .alt-table td.alt-winner { color: var(--accent-bright); } .alt-table .alt-sel { color: var(--text-tertiary); font-weight: 400; letter-spacing: 0; } .alt-table th { font-family: var(--font-mono); white-space: nowrap; } .just-detail { padding: 20px; min-width: 0; } .spec-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; } .spec-table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--text-tertiary); font-weight: 500; padding: 0 10px 8px 0; border-bottom: 1px solid var(--border); } .spec-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: top; } .spec-table tr:last-child td { border-bottom: none; } .spec-table .param-col { color: var(--text-secondary); } .spec-table .req-col, .spec-table .act-col { font-family: var(--font-mono); font-size: 12.5px; } .spec-table .check-col { text-align: center; width: 24px; } .spec-table .check-pass { color: var(--pass); font-weight: 700; } /* Value provenance: cited = the number comes from the part's datasheet via the authoring lane (hover for the section); uncited = no citation backs this requirement, and the chip names why (not stated in the datasheet, datasheet never read, not in English, never checked). Uncited values earn no spec-fit credit and rank the part below a fully-cited alternative. */ .prov-chip { margin-left: 6px; padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 1px; cursor: help; } .prov-chip.prov-cited { background: var(--pass-dim); color: var(--pass); } .prov-chip.prov-uncited { background: var(--surface-hover); color: var(--text-tertiary); border: 1px dashed var(--border); } .prov-note { margin-top: 6px; } .cite { color: var(--accent); font-family: var(--font-mono); font-size: 10.5px; cursor: help; border-bottom: 1px dotted var(--accent-border); } .sim-strip { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; } .sim-strip-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; } .sim-strip-head .sim-label { color: var(--text-secondary); } .sim-strip-head .sim-value { font-family: var(--font-mono); font-weight: 600; } /* Renderer toggle on the reference-circuit strip: Schematic (tscircuit viewer) vs Compact (SVG diagram). Small segmented control. */ .circ-view-toggle { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; } .circ-view-toggle button { font: inherit; font-size: 11px; letter-spacing: 0.02em; padding: 2px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--text-tertiary); cursor: pointer; } .circ-view-toggle button:hover { color: var(--text-secondary); } .circ-view-toggle button.active { background: var(--accent-dim); color: var(--accent-bright); } /* tscircuit schematic-viewer container on the reference-circuit strip. */ .ref-circ-viewer { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #0e1420; } /* Pin-map provenance caption under the viewer: verified KiCad symbol vs. datasheet functional pins (numbers hidden, map flagged unverified). */ .ref-circ-pinnote { margin-top: 6px; font-size: 11px; letter-spacing: 0.02em; color: var(--power); } .ref-circ-pinnote.ok { color: var(--text-tertiary); } /* Stage 3 — datasheet-grounded justification (reuses .sim-strip) */ .just-grounding { border-left: 2px solid var(--accent); } .just-grounding .just-statement { font-size: 13.5px; line-height: 1.65; color: var(--text); margin-bottom: 12px; } .just-grounding .spec-table { margin-bottom: 12px; } /* Three-tier justification lineage: functional need -> electrical spec -> datasheet value. The hint names the mapping; the table columns carry it. */ .just-lineage { font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); margin-bottom: 10px; } .just-lineage .lin-func, .just-lineage .lin-elec, .just-lineage .lin-data { color: var(--text-secondary); font-weight: 500; } .spec-table.just-tiers .func-col { color: var(--text); max-width: 240px; } .spec-table.just-tiers .elec-col { max-width: 260px; overflow-wrap: anywhere; } .spec-table.just-tiers .elec-key { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); } .spec-table.just-tiers .elec-req { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); margin-left: 8px; } .just-link { font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-decoration: none; } .just-link:hover { text-decoration: underline; } .margin-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; position: relative; } .margin-bar-fill { height: 100%; background: var(--pass); border-radius: 3px; } .margin-bar-limit { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--fail); opacity: 0.6; } .margin-bar-labels { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); } .ref-note { background: var(--bg-raised); border: 1px solid var(--border); border-left: 2px solid var(--text-tertiary); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6; } .ref-note.pending { border-left-color: var(--accent); color: var(--text); } /* Param provenance chips (Stage 1b derivation): how a value was produced */ .param-basis { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 1px; color: var(--text-secondary); cursor: default; } .param-basis.formula { color: var(--pass); border-color: rgba(47, 174, 114, 0.35); background: var(--pass-dim); } .param-basis.unverified { color: var(--fail); border-color: rgba(229, 72, 77, 0.35); background: var(--fail-dim); } .ref-note.param-flags { border-left-color: var(--fail); color: var(--text); } /* Inline confirm/edit controls for estimate/model params (engineer review). */ .param-review-actions { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 1px; } .param-review-btn { padding: 0 6px; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 16px; border-radius: 999px; } /* reference-module expandable panel (Stage 2a validation) */ details.ref-module { background: var(--bg-raised); border: 1px solid var(--border); border-left: 2px solid var(--text-tertiary); border-radius: var(--radius-sm); margin-bottom: 16px; } details.ref-module summary { cursor: pointer; padding: 12px 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; list-style: none; } details.ref-module summary::-webkit-details-marker { display: none; } details.ref-module summary::before { content: "▸ "; color: var(--accent); } details.ref-module[open] summary::before { content: "▾ "; } details.ref-module summary strong { color: var(--text); } .ref-module-body { padding: 0 14px 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; } .ref-module-body > p { margin: 0 0 12px; } .ref-module-title { font-family: var(--font-mono); font-size: 12px; margin-bottom: 6px; } .ref-module-title strong { color: var(--text); } .ref-module-name { font-size: 12px; } .ref-module-desc { margin: 0 0 10px; } .ref-module-meta { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 11px; margin-bottom: 4px; } .ref-module-key { color: var(--text-tertiary); min-width: 90px; } .ref-module .footnotes { margin-top: 10px; } .footnotes { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); line-height: 1.9; } .footnotes .fn-num { color: var(--accent); } .spec-table .check-unverified { color: var(--text-tertiary); font-weight: 700; } /* selection toolbar + audit trail (Stage 2a) */ .selection-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .selection-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary); } details.audit { border-top: 1px solid var(--border); } details.audit summary { cursor: pointer; padding: 11px 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-tertiary); list-style: none; transition: color 0.15s ease; } details.audit summary:hover { color: var(--text-secondary); } details.audit summary::before { content: "▸ "; color: var(--accent); } details.audit[open] summary::before { content: "▾ "; } .audit-body { padding: 0 20px 14px; display: flex; flex-direction: column; gap: 6px; } .audit-row { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 11.5px; align-items: baseline; } .audit-mpn { color: var(--text-secondary); min-width: 140px; } .audit-reason { color: var(--text-tertiary); } /* ---------- Stage 3: review ---------- */ .review-banner { display: flex; align-items: flex-start; gap: 14px; background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 32px; } .review-banner svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); } .review-banner-title { font-weight: 700; font-size: 14.5px; color: var(--accent-bright); margin-bottom: 3px; } .review-banner-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; max-width: 720px; } .review-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; } .schem-canvas { min-height: 480px; max-height: 660px; position: relative; background-color: var(--bg); overflow: auto; } /* The sized drawing surface the hub layout is placed on. Larger than the viewport for busy boards — the .schem-canvas scrolls; the dotted grid rides with the content. margin:0 auto centers it when it fits and left-aligns it (fully scrollable, no clipped edge) when it's wider than the viewport. */ .schem-stage { margin: 0 auto; background-image: radial-gradient(var(--border-strong) 1px, transparent 1px); background-size: 22px 22px; } .schem-block { position: absolute; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); z-index: 1; } /* The hub (MCU or most-connected block) is the visual anchor of the board. */ .schem-block.hub { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-dim); background: var(--surface-hover); } .schem-block.hub .sb-ref { color: var(--accent-bright); } .schem-block .sb-ref { font-size: 12px; font-weight: 700; color: var(--text); } .schem-block .sb-name { font-size: 9px; color: var(--text-tertiary); margin-top: 2px; letter-spacing: 0.03em; max-width: 100%; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Symbol-style block: refdes header on top, pin rows below. Row heights must match the CANVAS constants in review/page.tsx (headH/pinH/footH) — the wire stubs are computed from them. */ .schem-block.has-pins { justify-content: flex-start; align-items: stretch; overflow: hidden; } .schem-block.has-pins .sb-head { height: 30px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-strong); } .schem-block.has-pins .sb-name { margin-top: 1px; } .sb-pins { display: flex; flex-direction: column; } .sb-pin { height: 13px; box-sizing: border-box; display: flex; align-items: center; gap: 5px; padding: 0 6px; font-size: 9px; white-space: nowrap; } .sb-pin-num { min-width: 14px; text-align: right; color: var(--text-tertiary); } .sb-pin-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; } /* A tap the verified symbol can't confirm — same warn accent as the BOM. */ .sb-pin.flag .sb-pin-num, .sb-pin.flag .sb-pin-name { color: var(--accent-bright); } .sb-pin-foot { height: 12px; box-sizing: border-box; display: flex; align-items: center; padding: 0 6px; font-size: 8px; letter-spacing: 0.03em; color: var(--text-tertiary); } .sb-pin-foot.flag { color: var(--accent-bright); } .schem-passive { position: absolute; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); overflow: hidden; padding: 0 3px; z-index: 1; } .schem-passive .sp-ref, .schem-passive .sp-net { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .schem-passive .sp-ref { font-size: 9px; font-weight: 700; color: var(--text); } .schem-passive .sp-net { font-size: 8px; color: var(--text-tertiary); letter-spacing: 0.02em; margin-top: 1px; } .schem-passive:hover { border-color: var(--accent-border); cursor: help; } /* Value-provenance glyph: DS = datasheet-recommended, ƒx = computed from a datasheet equation, ? = not derived (reviewer must set it). */ .sp-prov { font-family: var(--font-mono); font-size: 7.5px; font-weight: 700; border-radius: 3px; padding: 0 3px; margin-right: 3px; vertical-align: 1px; } .sp-prov.ds { color: var(--pass); background: var(--pass-dim); } .sp-prov.calc { color: var(--accent-bright); background: var(--accent-dim); } .sp-prov.none { color: var(--power-bright); background: rgba(229, 169, 61, 0.14); } /* BOM rows use the same glyph a size up. */ .bom-table .sp-prov { font-size: 9.5px; padding: 1px 5px; margin-right: 6px; } /* Hover card: where a support passive's value came from. */ .schem-tip { position: absolute; z-index: 30; width: 288px; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 14px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55); font-size: 12px; pointer-events: none; text-align: left; } .tip-head { font-weight: 600; margin-bottom: 7px; } .tip-role { color: var(--text-secondary); font-weight: 400; } .prov-chip { display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; } .prov-chip.ds { color: var(--pass); background: var(--pass-dim); } .prov-chip.calc { color: var(--accent-bright); background: var(--accent-dim); } .prov-chip.none { color: var(--power-bright); background: rgba(229, 169, 61, 0.14); } .tip-line { margin-top: 6px; color: var(--text-secondary); line-height: 1.45; overflow-wrap: anywhere; } .tip-line.mono { font-family: var(--font-mono); font-size: 11px; color: var(--text); } .tip-warn { color: var(--power-bright); } .tip-conn { color: var(--text-tertiary); font-size: 11px; } /* Package preview on Component selection: the physical part shown three ways (isometric 3D on top, schematic symbol + PCB footprint below), all drawn from one backend Circuit JSON. */ /* Package previews live in the narrow identity column, under the datasheet link — small enough to read as part identity, not as a figure. */ .pkg-preview { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .pkg-preview-head { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); } .pkg-preview-note { font-size: 10.5px; line-height: 1.45; color: var(--text-tertiary); } .pkg-pane { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pkg-pane-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7688; } .pkg-pane-body { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #0e1420; } /* Reference-circuit mini schematic on Component selection: the IC drawn as its symbol block (real pins on the sides), support passives wired on. */ .circ-canvas-wrap { overflow-x: auto; padding: 6px 0 2px; } .circ-canvas svg.wires { position: absolute; inset: 0; } .circ-canvas svg.wires line { stroke: var(--border-strong); stroke-width: 1; } .circ-canvas svg.wires circle { fill: var(--accent); } .cd-block .cd-pin-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } .cd-block .sb-pin { height: 15px; } .cd-pin-col-r .sb-pin { justify-content: flex-end; text-align: right; } /* Legacy chip styles (kept for any external reuse). */ .circ-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 2px; } .circ-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--bg-raised); padding: 5px 10px; font-family: var(--font-mono); font-size: 11px; cursor: help; } .circ-chip:hover { border-color: var(--accent-border); } .circ-chip-role { font-weight: 700; color: var(--text); } .circ-chip-value { color: var(--text-secondary); } .circ-card { display: none; bottom: calc(100% + 8px); left: -8px; font-family: var(--font-display); } .circ-chip:hover .circ-card { display: block; } /* Grouped BOM: IC rows toggle their support-part list. */ tr.bom-parent { cursor: pointer; } tr.bom-parent:hover td { background: var(--surface-hover); } .bom-chevron { display: inline-block; margin-right: 6px; color: var(--text-tertiary); transition: transform 0.15s; } .bom-chevron.open { transform: rotate(90deg); } .bom-kid-count { color: var(--text-tertiary); font-weight: 400; } .schem-canvas svg.wires { position: absolute; top: 0; left: 0; z-index: 0; } .schem-canvas svg.wires path, .schem-canvas svg.wires line { stroke: var(--border-strong); stroke-width: 1.5; fill: none; } .schem-canvas svg.wires circle { fill: var(--text-tertiary); } /* Inter-block signal nets: spokes converging on the centered hub. */ .schem-canvas svg.wires path.net, .schem-canvas svg.wires line.net { stroke: var(--accent); stroke-width: 1.4; } .schem-canvas svg.wires g.net circle { fill: var(--accent); } .schem-canvas svg.wires text.net-label { fill: var(--accent-bright); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.03em; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; } /* Horizontal-scroll safety net: with the fixed column widths below the table should always fit the panel, but a very long MPN/value on a narrow viewport scrolls here instead of ever clipping the EXT COST column. */ .bom-table-wrap { overflow-x: auto; overflow-y: hidden; } .bom-table { width: 100%; min-width: 460px; table-layout: fixed; border-collapse: collapse; } /* Fixed proportions so REFDES/QTY/TIER/EXT COST — short, bounded content — never fight the flexible MPN/VALUE and FOOTPRINT columns for room; EXT COST keeps enough width that a full "$123.45" is never cut off. */ .bom-table col.col-refdes { width: 15%; } .bom-table col.col-mpn { width: 34%; } .bom-table col.col-fp { width: 19%; } .bom-table col.col-qty { width: 8%; } .bom-table col.col-tier { width: 13%; } .bom-table col.col-cost { width: 11%; } .bom-table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--text-tertiary); font-weight: 500; padding: 12px 10px; border-bottom: 1px solid var(--border); background: var(--bg-raised); white-space: nowrap; } .bom-table th:first-child, .bom-table td:first-child { padding-left: 16px; } .bom-table th:last-child, .bom-table td:last-child { padding-right: 16px; } .bom-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); font-size: 12.5px; overflow: hidden; } .bom-table td.mono { font-family: var(--font-mono); } .bom-table tr:last-child td { border-bottom: none; } .bom-table td.num { text-align: right; font-family: var(--font-mono); white-space: nowrap; } /* MPN/VALUE, FOOTPRINT, TIER: truncate instead of forcing the table wider than its column plan (the full MPN is always in the row's title/tooltip content already, and the hover provenance card for support parts). */ .bom-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bom-mpn-main { overflow: hidden; text-overflow: ellipsis; } .bom-total td { font-weight: 700; color: var(--text); background: var(--bg-raised); font-family: var(--font-mono); } /* Footprint provenance cell: green tick when matched to a KLC-reviewed KiCad footprint, amber flag when something needs a human (family match, IC symbol sourcing, or an unresolved package). */ .fp-cell { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; cursor: help; } .fp-cell .mono { font-family: var(--font-mono); } .fp-glyph { font-size: 11px; line-height: 1; } .fp-ok { color: var(--text-secondary); } .fp-ok .fp-glyph { color: var(--pass); } .fp-flag { color: var(--accent-bright); } .fp-flag .fp-glyph { color: var(--accent); } .review-actions { padding: 0 20px 20px; } .review-actions-buttons { display: flex; gap: 10px; margin-bottom: 10px; } .review-actions-note { font-size: 12px; color: var(--text-tertiary); } @media (max-width: 900px) { .chat-layout, .review-layout { grid-template-columns: 1fr; } .just-body { grid-template-columns: 1fr; } .just-identity { border-right: none; border-bottom: 1px solid var(--border); } .pipeline-nav .num { display: none; } } /* --- Net-level electrical rule findings (BoardSchematicViewer) ------------- A finding is a property of the wire, not of a part, so it sits with the netlist rather than in a component's spec table. Three severities, using the app's existing pass/fail pair plus the accent for "confirm this" — no new hues. */ .net-rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .net-rule-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-left-width: 2px; border-radius: 4px; background: var(--surface); font-size: 12px; line-height: 1.45; } .net-rule-glyph { flex: 0 0 auto; width: 14px; text-align: center; font-weight: 700; } .net-rule-body { display: grid; gap: 2px; min-width: 0; } .net-rule-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .net-rule-head code { color: var(--text); font-size: 11px; } .net-rule-tag { color: var(--text-tertiary); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; } .net-rule-summary { color: var(--text-secondary); } .net-rule-pins { color: var(--text-tertiary); font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; } .net-rule-error { border-left-color: var(--fail); background: var(--fail-dim); } .net-rule-error .net-rule-glyph { color: var(--fail); } /* Warning shares the fail hue at lower weight — a severity ramp within one colour, rather than a new hue. Amber is reserved for the power path. */ .net-rule-warning { border-left-color: rgba(229, 72, 77, 0.5); } .net-rule-warning .net-rule-glyph { color: var(--fail); opacity: 0.75; } .net-rule-review { border-left-color: var(--accent); } .net-rule-review .net-rule-glyph { color: var(--accent); } /* --- Selection coverage summary (validation page) -------------------------- How much of the spec was actually compared. Deliberately stated as a proportion, not a score: a requirement that wasn't checked didn't fail, and the page must not imply otherwise. */ .coverage-summary { border: 1px solid var(--border); border-radius: 6px; background: var(--bg-raised); padding: 12px 14px; margin-bottom: 16px; } .coverage-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .coverage-stat { font-size: 13px; color: var(--text-secondary); } .coverage-stat strong { color: var(--text); font-size: 15px; } .coverage-gaps strong { color: var(--text-secondary); } .coverage-toggle { margin-left: auto; font-size: 12px; padding: 3px 10px; } .coverage-note { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-tertiary); max-width: 78ch; } .coverage-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .coverage-group-head { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; } .coverage-hint { color: var(--text-tertiary); } .coverage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .coverage-list li { display: flex; gap: 10px; align-items: baseline; font-size: 12px; flex-wrap: wrap; } .coverage-list code { color: var(--text); min-width: 14ch; } .coverage-block { color: var(--text-tertiary); min-width: 16ch; } .coverage-detail { color: var(--text-secondary); } /* --- Selection run progress (validation page) ------------------------------ A run is minutes long, most of it live stock lookups. Without a stage label, a moving bar and a measured time estimate, a slow run is indistinguishable from a hung one. */ .sel-progress { border: 1px solid var(--accent-border); border-radius: 6px; background: var(--bg-raised); padding: 12px 14px; margin-bottom: 16px; } .sel-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .sel-progress-stage { font-size: 13px; color: var(--text); font-weight: 600; } .sel-progress-count { color: var(--text-secondary); font-weight: 400; } .sel-progress-time { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .sel-progress-track { height: 4px; border-radius: 2px; background: var(--surface); overflow: hidden; } .sel-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 400ms ease; } /* No total yet (the first phase hasn't published a count): sweep rather than sit at zero, which reads as stalled. */ .sel-progress-fill.indeterminate { width: 30%; animation: sel-progress-sweep 1.6s ease-in-out infinite; } @keyframes sel-progress-sweep { 0% { margin-left: -30%; } 100% { margin-left: 100%; } } @media (prefers-reduced-motion: reduce) { .sel-progress-fill { transition: none; } .sel-progress-fill.indeterminate { animation: none; width: 100%; opacity: 0.4; } } .sel-progress-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-tertiary); max-width: 78ch; } /* --- Part-type reasoning + datasheet reverification (validation page) ------ The shelf decision explains itself so a reviewer can disagree with the KIND of part, not just the part; a reverify strip says when the datasheet overruled the distributor's listing. */ /* The strips are direct children of .just-body's 260px | 1fr grid, so without an explicit span they get squeezed into the narrow identity column — these are full-width banners about the block, not part-identity fields. */ .part-type-strip { grid-column: 1 / -1; padding: 8px 14px 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); } .part-type-kind { color: var(--text); font-weight: 600; } .part-type-basis { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 11px; } .reverify-strip { grid-column: 1 / -1; margin: 8px 14px 0; padding: 6px 10px; border-radius: 4px; font-size: 12px; line-height: 1.5; border: 1px solid var(--border); border-left-width: 2px; } .reverify-strip.swap { border-left-color: var(--accent); color: var(--text-secondary); } .reverify-strip.flag { border-left-color: var(--fail); background: var(--fail-dim); color: var(--text-secondary); } /* ---------- stage 02: the electrical-spec document ---------- A dense reference document rendered for a reader who is technical but not an EE: every id resolves to what it means on hover, every number carries its unit, and the two things that decide whether the document can be trusted — the gate report and the open items — sit above the fold rather than buried in the JSON. */ .espec-stage { max-width: 1400px; } .espec-error { margin-bottom: 18px; } /* the pre-run / blocked / failed card */ .espec-gate-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; max-width: 720px; font-size: 14px; color: var(--text-secondary); line-height: 1.6; } .espec-gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; } .espec-gate-actions .btn { display: inline-flex; align-items: center; } /* ---------- run progress ---------- */ .espec-progress { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; max-width: 780px; } .espec-progress-head { display: flex; align-items: center; gap: 12px; font-size: 13px; margin-bottom: 20px; } .espec-progress-stages { list-style: none; display: flex; flex-direction: column; gap: 2px; } .espec-progress-stage { display: grid; grid-template-columns: 16px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--border); } .espec-progress-stage:first-child { border-top: none; } .espec-progress-dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; border: 1.5px solid var(--border-strong); } .espec-progress-stage.running .espec-progress-dot { background: var(--accent); border-color: var(--accent); animation: pulse 1.4s ease-in-out infinite; } .espec-progress-stage.done .espec-progress-dot { background: var(--pass); border-color: var(--pass); } .espec-progress-text { display: flex; flex-direction: column; gap: 3px; } .espec-progress-label { font-size: 14px; font-weight: 600; color: var(--text-tertiary); } .espec-progress-stage.running .espec-progress-label, .espec-progress-stage.done .espec-progress-label { color: var(--text); } .espec-progress-detail { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5; } .espec-progress-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; padding-top: 3px; } .espec-progress-note { margin-top: 18px; font-size: 12.5px; color: var(--text-tertiary); } /* ---------- document header ---------- */ .espec-doc { display: flex; flex-direction: column; gap: 18px; } .espec-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* The header line is a subtitle, so it stays on ONE line and elides rather than wrapping to two and pushing the diagram down. min-width:0 is what lets a flex child actually shrink far enough to ellipsize. */ .espec-header-main { flex: 1 1 320px; min-width: 0; } .espec-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; max-width: 780px; } .espec-header-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--text-secondary); } .espec-header-side { display: flex; align-items: center; gap: 12px; } .espec-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .espec-stat { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; } .espec-stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 600; line-height: 1.1; } .espec-stat.tone-warn .espec-stat-value { color: var(--power); } .espec-stat.tone-fail .espec-stat-value { color: var(--fail); } .espec-stat-label { font-size: 12px; color: var(--text-secondary); } .espec-stat-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); } /* ---------- tabs ---------- */ .espec-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); } .espec-tab { display: flex; align-items: center; gap: 7px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--text-tertiary); padding: 10px 14px; margin-bottom: -1px; } .espec-tab:hover { color: var(--text-secondary); } .espec-tab.active { color: var(--text); border-bottom-color: var(--accent); } .espec-tab-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); background: var(--bg-raised); border-radius: 3px; padding: 1px 5px; } .espec-tab-body { min-height: 300px; } .espec-stack { display: flex; flex-direction: column; gap: 16px; } /* ---------- panels ---------- */ .espec-panel-body { padding: 14px 18px 18px; } .espec-panel-aside { display: flex; align-items: center; gap: 10px; min-width: 0; } .espec-panel-note { font-size: 11.5px; color: var(--text-tertiary); text-align: right; line-height: 1.4; max-width: 460px; } .espec-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; } .espec-empty { color: var(--text-tertiary); font-size: 13px; padding: 8px 0; } /* ---------- shared atoms of the document render ---------- */ .espec-id { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); letter-spacing: 0.02em; } .espec-table { margin-bottom: 0; } .espec-table td.dim, .dim { color: var(--text-tertiary); } .mono { font-family: var(--font-mono); font-size: 12px; } .nowrap { white-space: nowrap; } .espec-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--border-strong); color: var(--text-secondary); background: var(--bg-raised); white-space: nowrap; } .espec-badge.tone-pass { color: var(--pass); background: var(--pass-dim); border-color: rgba(47, 174, 114, 0.3); } .espec-badge.tone-fail { color: var(--fail); background: var(--fail-dim); border-color: rgba(229, 72, 77, 0.3); } .espec-badge.tone-warn { color: var(--power); background: rgba(229, 169, 61, 0.1); border-color: var(--power-border); } .espec-badge.tone-accent { color: var(--accent-bright); background: var(--accent-dim); border-color: var(--accent-border); } .espec-warn-inline { color: var(--power); font-size: 12px; } .espec-value-main { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); } .espec-value-range { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); } .espec-cond { display: block; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.45; } /* cross-references */ .idrefs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; } .idrefs-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-right: 2px; } .idref { font-family: var(--font-mono); font-size: 11px; cursor: pointer; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; color: var(--text-secondary); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color 0.12s ease, color 0.12s ease; } .idref:hover { color: var(--text); border-color: var(--border-strong); } .idref-atm:hover { border-color: var(--accent-border); } .idref-asm { color: var(--power); } .idref-open { color: var(--fail); } .idref-blk, .idref-if { color: var(--accent); } .idref-rail { color: var(--power); } .idref-missing { color: var(--fail); border-color: rgba(229, 72, 77, 0.4); text-decoration: line-through; } .espec-link { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-display); font-size: 12px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-border); } /* the flash a cross-reference jump leaves on its target */ .espec-flash, tr.espec-flash td { animation: espec-flash 2.4s ease-out; } @keyframes espec-flash { 0%, 40% { background: var(--accent-dim); } 100% { background: transparent; } } /* ---------- key/value grids ---------- */ .espec-kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; margin-bottom: 6px; } .espec-kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .espec-kv-k { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); } .espec-kv-v { font-size: 13px; color: var(--text); word-break: break-word; } /* ---------- cards ---------- */ .espec-cards { display: flex; flex-direction: column; gap: 10px; } .espec-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; } .espec-card-blocking { border-left: 2px solid var(--fail); } .espec-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .espec-card-title { font-size: 14px; font-weight: 600; line-height: 1.4; } .espec-card-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .espec-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; color: var(--text-tertiary); } .espec-card-body { font-size: 13px; color: var(--text-secondary); line-height: 1.55; } .espec-options { margin: 0 0 0 18px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; } /* ---------- filters ---------- */ .espec-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .espec-lenses { display: flex; flex-wrap: wrap; gap: 6px; } .espec-chip { cursor: pointer; font-family: var(--font-display); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); } .espec-chip:hover { color: var(--text); border-color: var(--border-strong); } .espec-chip.active { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent-bright); } .espec-search { flex: 1; min-width: 180px; max-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 11px; color: var(--text); font-family: var(--font-display); font-size: 13px; } .espec-search::placeholder { color: var(--text-tertiary); } .espec-filter-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-left: auto; } /* ---------- requirements ---------- */ .espec-atoms { display: flex; flex-direction: column; } .espec-atom { display: grid; grid-template-columns: 1fr 200px; gap: 20px; padding: 14px 0; border-top: 1px solid var(--border); } .espec-atom:first-child { border-top: none; padding-top: 2px; } .espec-atom-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .espec-atom-statement { font-size: 14px; line-height: 1.5; } .espec-atom-meta, .espec-atom-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .espec-atom-value { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .espec-quotes { display: flex; flex-direction: column; gap: 6px; margin: 2px 0; } .espec-quotes blockquote { border-left: 2px solid var(--border-strong); padding-left: 12px; font-size: 13px; color: var(--text-secondary); font-style: italic; line-height: 1.55; } /* ---------- specs ---------- */ .espec-specs-table .espec-spec-row { cursor: pointer; } .espec-specs-table .espec-spec-row:hover td { background: var(--surface-hover); } .espec-specs-table .espec-spec-row.open td { border-bottom-color: transparent; } .espec-param { font-size: 13.5px; font-weight: 600; } .espec-method { font-size: 11px; margin-top: 3px; } .espec-spec-detail td { background: var(--bg-raised); padding: 12px 14px; } .espec-derivation { display: flex; flex-direction: column; gap: 7px; } .espec-deriv-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: 12.5px; align-items: baseline; } .espec-deriv-k { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); } .espec-expr { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); line-height: 2; word-break: break-word; } .espec-signals { margin-top: 4px; } /* ---------- power ---------- */ .espec-rail-load { display: flex; flex-direction: column; gap: 5px; margin: 3px 0; } .espec-rail-numbers { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 12.5px; } .espec-loadbar { height: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; max-width: 420px; } .espec-loadbar-fill { height: 100%; background: var(--pass); } .espec-loadbar.over .espec-loadbar-fill { background: var(--fail); } .espec-loadbar-unknown { background: repeating-linear-gradient( -45deg, var(--border) 0 4px, transparent 4px 8px ); } .espec-bar-col { width: 140px; } .espec-scenario { padding: 14px 0; border-top: 1px solid var(--border); } .espec-scenario:first-child { border-top: none; padding-top: 0; } .espec-scenario-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .espec-scenario-name { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; flex: 1; min-width: 240px; } .espec-scenario-rail { margin-bottom: 14px; } .espec-total-row td { font-weight: 600; border-bottom: none; border-top: 1px solid var(--border-strong); } .espec-bus { margin-bottom: 16px; } .espec-bus-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } /* ---------- gate report + raw ---------- */ .espec-gate-group { margin-bottom: 14px; } .espec-gate-group:last-child { margin-bottom: 0; } .espec-gate-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 12px; } .espec-gate-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } .espec-gate-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; padding-left: 12px; border-left: 1px solid var(--border-strong); } .espec-gate-check { color: var(--text-tertiary); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; } .espec-gate-ids { display: inline-flex; flex-wrap: wrap; gap: 4px; } .espec-raw { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--text-secondary); max-height: 70vh; overflow: auto; white-space: pre; } .espec-rerun { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 12.5px; } @media (max-width: 900px) { .espec-atom { grid-template-columns: 1fr; gap: 8px; } .espec-panel-note { display: none; } } /* ============================================================================ Component selection (Stage 6) ========================================================================= */ /* ---- board view: the chosen part on the node, the attention strip ---- */ .diagram-node-part { font-size: 10.5px; color: var(--accent-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; } .sel-attention { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 12px; padding: 10px 14px; border: 1px solid rgba(229, 169, 61, 0.45); border-radius: var(--radius-sm); background: rgba(229, 169, 61, 0.07); } .sel-attention-lead { font-weight: 700; font-size: 12.5px; color: var(--power); } .sel-attention-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sel-attention-chip { cursor: pointer; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 11.5px; padding: 4px 11px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease; } .sel-attention-chip:hover { border-color: var(--accent); background: var(--surface-hover); } .sel-attention-count { margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: rgba(229, 169, 61, 0.18); color: var(--power); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; } .sel-board-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 12px; } .sel-board-next { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; font-size: 12px; } .sel-board-next > .dim { max-width: 460px; line-height: 1.45; } /* ---- decisions in plain English ---- */ .sel-decision-q { font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--text); margin: 2px 0 4px; } .sel-decision-check { font-size: 12.5px; color: var(--text-secondary); } .sel-decision-numbers { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-raised); font-size: 12.5px; } .sel-decision-numbers > div { display: flex; flex-direction: column; gap: 2px; } .sel-datasheet-link { color: var(--accent-bright); text-decoration: none; border-bottom: 1px dotted var(--accent-border); white-space: nowrap; font-size: 11.5px; } .sel-datasheet-link:hover { border-bottom-style: solid; } /* ---- part drawer ---- */ .sel-drawer-part { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .sel-drawer-mpn { font-size: 15px; font-weight: 700; color: var(--accent-bright); } .sel-drawer-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; } /* ---- pins & signals ---- */ .sel-pin-table td:first-child { white-space: nowrap; } .sel-pin-unassigned td { background: var(--fail-dim); } .sel-pin-budget { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .sel-pin-fact { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; line-height: 1.35; } .sel-pin-num { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text); } .sel-pin-num.fail { color: var(--fail); } .sel-block { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); } .sel-block > summary { cursor: pointer; list-style: none; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; } .sel-block > summary::-webkit-details-marker { display: none; } .sel-block > summary:hover { background: var(--surface); } .sel-block[open] > summary { border-bottom: 1px solid var(--border); } .sel-block-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .sel-block-name { font-size: 14px; font-weight: 600; } .sel-block-part { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; } .sel-block-intent { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; } .sel-block-detail { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; } .sel-decision-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sel-loopback-filter { font-size: 12.5px; line-height: 1.6; padding: 6px 0 0; border-top: 1px dashed var(--border); } .sel-bom-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: 13px; } /* Sections inside an expanded component card. Each folds independently so the * card reads as "here is the part, here is what goes around it" rather than a * wall of tables. */ .sel-sub { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; } .sel-sub > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); list-style: none; padding: 2px 0; } .sel-sub > summary::-webkit-details-marker { display: none; } .sel-sub > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--text-tertiary); transition: transform 0.12s ease; } .sel-sub[open] > summary::before { transform: rotate(90deg); } .sel-sub > summary > .dim { font-weight: 400; } .sel-sub > table { margin-top: 8px; } /* The support circuit is the answer to "what goes around this component" — * given a tint so it reads as its own thing inside the card. */ .sel-support { background: color-mix(in srgb, var(--surface-2) 45%, transparent); border-radius: 8px; padding: 10px 12px; border-top: none; } /* Support-part BOM rows: visually subordinate to the main lines, with the * per-instance why-trace behind a disclosure. */ .sel-bom-support td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); } .sel-bom-why > summary { cursor: pointer; color: var(--text-secondary); } .sel-bom-why ul { margin: 6px 0 0; padding-left: 16px; font-size: 12px; line-height: 1.6; color: var(--text-tertiary); } .sel-progress { margin-top: 10px; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.7; } /* ---------- espec board view: view toggle, diagram, drawer, review ---------- */ .btn-sm { padding: 6px 12px; font-size: 12px; } .espec-view-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; } .espec-view-btn { cursor: pointer; border: none; background: transparent; color: var(--text-secondary); font-family: var(--font-display); font-weight: 700; font-size: 12.5px; padding: 8px 14px; transition: background 0.15s ease, color 0.15s ease; } .espec-view-btn + .espec-view-btn { border-left: 1px solid var(--border-strong); } .espec-view-btn:hover { color: var(--text); background: var(--surface-hover); } .espec-view-btn.active { color: var(--accent-bright); background: var(--accent-dim); } /* ---- diagram ---- */ .espec-diagram-layout { position: relative; } .diagram-wrap { display: flex; flex-direction: column; gap: 10px; } .diagram-legend { display: flex; flex-direction: column; gap: 7px; margin: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(17, 20, 27, 0.9); backdrop-filter: blur(6px); font-size: 11.5px; color: var(--text-secondary); } .diagram-legend-item { display: inline-flex; align-items: center; gap: 6px; } .diagram-legend-line { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--border-strong); } .diagram-legend-line.power { border-color: var(--net-power); } .diagram-legend-line.bus { border-color: var(--accent); } .diagram-canvas { height: min(66vh, 720px); min-height: 460px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); overflow: hidden; } .diagram-loading { display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); } .diagram-node { width: 196px; height: 78px; padding: 10px 12px; border-radius: var(--radius); border: 1.5px solid var(--border-strong); background: var(--surface); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; overflow: hidden; } .diagram-node:hover { transform: translateY(-1px); border-color: var(--text-tertiary); } .diagram-node.selected { box-shadow: 0 0 0 2px var(--accent-border); border-color: var(--accent); } .diagram-node.health-red { border-color: var(--fail); background: linear-gradient(var(--fail-dim), var(--fail-dim)), var(--surface); } .diagram-node.health-yellow { border-color: rgba(229, 169, 61, 0.7); background: linear-gradient(rgba(229, 169, 61, 0.08), rgba(229, 169, 61, 0.08)), var(--surface); } .diagram-node.health-red.selected { box-shadow: 0 0 0 2px var(--fail-dim); } .diagram-node-head { display: flex; align-items: center; gap: 7px; min-width: 0; } .diagram-node-name { font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .diagram-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; } .diagram-dot.health-green { background: var(--pass); } .diagram-dot.health-yellow { background: var(--power); box-shadow: 0 0 6px rgba(229, 169, 61, 0.5); } .diagram-dot.health-red { background: var(--fail); box-shadow: 0 0 6px rgba(229, 72, 77, 0.55); } .diagram-node-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; font-size: 10.5px; color: var(--text-secondary); } .diagram-node-specs { color: var(--text-tertiary); } .diagram-spine { position: relative; width: 100%; height: 100%; background: var(--accent); border-radius: 2px; opacity: 0.85; overflow: visible; } .diagram-spine-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 9px; border: 1px solid currentColor; background: var(--bg-raised); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; } .diagram-handle { opacity: 0; pointer-events: none; width: 6px; height: 6px; min-width: 0; min-height: 0; border: none; } .react-flow__edge.diagram-edge-power .react-flow__edge-path { stroke: var(--net-power); stroke-width: 2; } .react-flow__edge.diagram-edge-bus .react-flow__edge-path { stroke: var(--net-bus); stroke-width: 1.6; } .react-flow__edge.diagram-edge-constraint .react-flow__edge-path { stroke: var(--text-tertiary); stroke-width: 1.2; stroke-dasharray: 5 4; } .espec-diagram-layout .react-flow__edge-text { fill: var(--text-secondary); font-size: 10px; font-family: var(--font-mono); } .espec-diagram-layout .react-flow__edge-textbg { fill: var(--bg-raised); } .espec-diagram-layout .react-flow__attribution { display: none; } .espec-diagram-layout .react-flow__controls { box-shadow: none; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .espec-diagram-layout .react-flow__controls-button { background: var(--surface); border-bottom: 1px solid var(--border); } .espec-diagram-layout .react-flow__controls-button:hover { background: var(--surface-hover); } .espec-diagram-layout .react-flow__controls-button svg { fill: var(--text-secondary); } /* ---- block drawer ---- */ .block-drawer { position: fixed; top: 60px; right: 0; bottom: 0; width: min(560px, 92vw); display: flex; flex-direction: column; background: var(--bg-raised); border-left: 1px solid var(--border-strong); box-shadow: -18px 0 48px rgba(0, 0, 0, 0.45); z-index: 90; animation: drawer-in 0.18s ease-out; } @keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .block-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); } .block-drawer-title { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; } .block-drawer-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 12px; } .drawer-health-label { font-size: 11.5px; font-weight: 700; } .drawer-health-label.health-red { color: var(--fail); } .drawer-health-label.health-yellow { color: var(--power); } .drawer-health-label.health-green { color: var(--pass); } .block-drawer-body { flex: 1; overflow-y: auto; padding: 14px 20px 28px; display: flex; flex-direction: column; gap: 20px; } .drawer-readonly-note { font-size: 12px; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); } .drawer-section { display: flex; flex-direction: column; gap: 8px; } .drawer-section-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-secondary); } .drawer-section-note { font-size: 12px; line-height: 1.5; } .drawer-reasons { list-style: none; display: flex; flex-direction: column; gap: 6px; } .drawer-reason { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12.5px; border: 1px solid var(--border); } .drawer-reason.tone-fail { border-color: rgba(229, 72, 77, 0.4); background: var(--fail-dim); } .drawer-reason.tone-warn { border-color: rgba(229, 169, 61, 0.4); background: rgba(229, 169, 61, 0.08); } .drawer-reason-ids { display: inline-flex; flex-wrap: wrap; gap: 4px; } .drawer-atoms { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 13px; } .drawer-atoms li { padding-left: 14px; position: relative; } .drawer-atoms li::before { content: "\2022"; position: absolute; left: 0; color: var(--text-tertiary); } .drawer-specs { overflow-x: auto; } .drawer-rails { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; } .drawer-foot { padding-top: 4px; border-top: 1px solid var(--border); } /* ---- review controls (shared: drawer + requirements page) ---- */ .drawer-assumption { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid rgba(229, 169, 61, 0.4); background: rgba(229, 169, 61, 0.06); border-radius: var(--radius-sm); flex-wrap: wrap; } .drawer-assumption + .drawer-assumption { margin-top: 8px; } .drawer-assumption.reviewed { border-color: rgba(47, 174, 114, 0.4); background: var(--pass-dim); } .drawer-assumption-main { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .drawer-assumption-statement { font-size: 13.5px; font-weight: 600; line-height: 1.45; } .drawer-assumption-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 12px; } .drawer-assumption-basis { font-size: 12px; line-height: 1.5; } .drawer-assumption-actions { display: flex; gap: 6px; flex: none; } .drawer-review-stamp { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; } .drawer-value-editor { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--border-strong); } .drawer-value-fields { display: flex; align-items: flex-end; gap: 10px; } .drawer-value-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-tertiary); } .drawer-value-field input { width: 84px; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 13px; } .drawer-value-unit { padding-bottom: 8px; color: var(--text-secondary); font-family: var(--font-mono); font-size: 12.5px; } .drawer-note-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: var(--font-display); font-size: 12.5px; } .drawer-problem { color: var(--fail); font-size: 12px; } .drawer-editor-actions { display: flex; align-items: center; gap: 10px; } .drawer-open-item { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .drawer-open-item + .drawer-open-item { margin-top: 8px; } .drawer-open-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; line-height: 1.45; } /* The item's NAME, when it has one. The statement then reads as its explanation rather than as the heading, which is what a 60-word conflict paragraph was being used as. */ .drawer-open-title { font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; } .drawer-open-statement { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); } /* The call the pipeline would make. Tinted and bordered so it reads as a proposal to accept, not as one more option in the list below it. */ .drawer-recommendation { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px 12px; border: 1px solid var(--accent-border); border-radius: var(--radius-sm); background: var(--accent-dim); } .drawer-recommendation-head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } .drawer-recommendation-option { font-size: 13px; font-weight: 600; line-height: 1.5; } .drawer-recommendation-why { font-size: 12px; line-height: 1.55; } /* Options carry a button now, so each row is a line of text with the action pinned right rather than a bullet. */ .drawer-open-item .espec-options { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .drawer-open-item .espec-options li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); } .drawer-open-item .espec-options li button { flex: none; } /* Already offered above with its own Accept button — shown here only so the list of what was considered stays complete. */ .drawer-open-item .espec-options li.espec-option-recommended { border-color: var(--accent-border); color: var(--text-secondary); } .drawer-open-propose { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 11.5px; } .drawer-answer { display: flex; gap: 8px; } .drawer-answer .drawer-note-input { flex: 1; } /* The supply the board is plugged into. Dashed, because it is not a block on the board and will never have a part — it is the cable and whatever is on the other end of it. */ .diagram-supply { box-sizing: border-box; width: 100%; height: 100%; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border: 1px dashed #d95926; border-radius: var(--radius-sm); background: color-mix(in srgb, #d95926 8%, transparent); } .diagram-supply.over { border-style: solid; background: color-mix(in srgb, #d95926 16%, transparent); } .diagram-supply-head { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); } .diagram-supply-label { font-size: 12px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diagram-supply-figs { display: flex; flex-direction: column; font-size: 10.5px; line-height: 1.35; color: var(--text-secondary); } .diagram-supply-over { color: #d95926; font-weight: 600; } /* "Power in" — the four figures that answer "can it run off this cable", as a label/value grid rather than prose, so the numbers line up and the headroom badge is the thing the eye lands on. */ .espec-powerin { display: grid; grid-template-columns: 128px 1fr; gap: 6px 14px; margin-bottom: 12px; } .espec-powerin-fig { display: contents; } .espec-powerin-k { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; align-self: center; } .espec-powerin-v { font-size: 13px; overflow-wrap: anywhere; } /* Justification and Source each stack their parts: a sentence, then the same thing in symbols, then what it was computed from. Inline they ran together into one unreadable line at 560px. */ .drawer-spec-just { display: flex; flex-direction: column; gap: 3px; } /* The state after a conflict is answered but the specs written under it still read "conflict". Boxed rather than another loose note, because it is an action the block is waiting on, not commentary. */ .drawer-rederive { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--accent-border); border-radius: var(--radius-sm); } .drawer-rederive .drawer-section-note { margin: 0; } .drawer-comment-box { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: var(--font-display); font-size: 13px; line-height: 1.5; resize: vertical; } .drawer-comment-box:focus { outline: none; border-color: var(--accent-border); } .drawer-comment-outcome { font-size: 12.5px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); } /* ---- requirements-page review ---- */ .req-review { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; } .req-review-title { font-size: 19px; font-weight: 800; margin-bottom: 4px; } .req-review-intro .dim { max-width: 640px; } .req-review-gate { margin-top: 10px; display: inline-block; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(229, 169, 61, 0.45); background: rgba(229, 169, 61, 0.08); font-size: 13px; } .req-review-gate.done { border-color: rgba(47, 174, 114, 0.45); background: var(--pass-dim); color: var(--pass); } .req-review-panel .panel-head { align-items: center; } .req-review-body { padding: 14px 16px; } .req-review-atoms { list-style: none; display: flex; flex-direction: column; } .req-review-atom { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .req-review-atom:last-child { border-bottom: none; } .req-review-atom-side { display: inline-flex; align-items: baseline; gap: 8px; flex: none; } .req-stale-banner a { font-weight: 700; } .decider-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--accent-border); background: var(--accent-dim); border-radius: var(--radius-sm); font-size: 12.5px; } .decider-bar.signed { border-color: var(--border); background: var(--surface); } .decider-bar .drawer-note-input { flex: 1 1 160px; width: auto; } .req-review .decider-bar { margin-top: 12px; } .diagram-trunk { position: relative; width: 100%; height: 100%; background: var(--net-power); border-radius: 2px; opacity: 0.9; overflow: visible; } .diagram-trunk-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2px 9px; border-radius: 9px; border: 1px solid currentColor; background: var(--bg-raised); font-family: var(--font-mono); font-size: 10px; font-weight: 700; white-space: nowrap; } /* Wires are drawn from exact coordinates (OrthoEdge), so the stroke must not be filled — a hop bridge is an arc on an open path. */ .espec-diagram-layout .react-flow__edge-path { fill: none; } .diagram-edge-label { position: absolute; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--bg-raised); color: var(--text-secondary); font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; pointer-events: none; } .react-flow__edge.diagram-edge-power .diagram-edge-label { color: var(--power-bright); border-color: var(--power-border); } /* Block glyph + the confirm/sign-off button. */ .diagram-node-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-raised); color: var(--text-secondary); } .diagram-node.health-red .diagram-node-icon { color: var(--fail); border-color: rgba(229, 72, 77, 0.5); } .diagram-node.health-yellow .diagram-node-icon { color: var(--power); border-color: rgba(229, 169, 61, 0.5); } .diagram-node.health-green .diagram-node-icon { color: var(--pass); border-color: rgba(47, 174, 114, 0.45); } .diagram-node-head .diagram-node-name { flex: 1; min-width: 0; } .btn-confirm { background: var(--pass); color: #05130c; } .btn-confirm:hover:enabled { background: #37c283; } .btn-confirm.btn-gated { background: var(--surface-hover); color: var(--text-tertiary); border: 1px solid var(--border-strong); cursor: not-allowed; } .btn-confirmed { background: var(--pass-dim); color: var(--pass); border: 1px solid rgba(47, 174, 114, 0.45); cursor: default; opacity: 1; } .espec-board-line { margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .diagram-node-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .diagram-node-badge { padding: 1px 6px; border-radius: 8px; border: 1px solid var(--border-strong); font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .diagram-node-badge.tone-fail { color: var(--fail); border-color: rgba(229, 72, 77, 0.45); background: var(--fail-dim); } .diagram-node-badge.tone-warn { color: var(--power); border-color: rgba(229, 169, 61, 0.45); background: rgba(229, 169, 61, 0.1); } /* ---- drawer: specs sized for a narrow panel ---- */ .drawer-spec-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } .drawer-spec { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 8px 10px; } .drawer-spec.open { border-color: var(--border-strong); background: var(--surface-hover); } .drawer-spec.stale { border-color: rgba(229, 169, 61, 0.45); } .drawer-spec-head { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 0; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .drawer-spec-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; font-weight: 600; } .drawer-spec-domain { font-size: 10.5px; font-weight: 500; color: var(--text-tertiary); } .drawer-spec-value { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; } .drawer-spec-caret { flex: none; color: var(--text-tertiary); font-size: 10px; } .drawer-spec-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .drawer-spec-detail { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border-strong); } /* 104px, not 74px: the column was sized for "How" / "From" / "Note" and the labels are now "Justification" and "Source", the first of which is 13 characters of letter-spaced uppercase and ran into its own value. */ .drawer-spec-detail-row { display: grid; grid-template-columns: 104px 1fr; gap: 12px; font-size: 12px; line-height: 1.5; } .drawer-spec-detail-k { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .drawer-spec-detail-v { min-width: 0; overflow-wrap: anywhere; } .drawer-assumption-source { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-top: 2px; font-size: 11.5px; } .drawer-source-link { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; } .drawer-source-link:hover { color: var(--accent); } .drawer-source-paywall { color: var(--text-tertiary); text-decoration: none; } .drawer-source-check { flex-basis: 100%; color: var(--text-tertiary); line-height: 1.5; } .drawer-spec-override { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border-strong); } .drawer-spec-override-stamp { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; font-size: 11.5px; } .req-atoms { list-style: none; display: flex; flex-direction: column; } .req-atom { padding: 9px 0; border-bottom: 1px solid var(--border); } .req-atom:last-child { border-bottom: none; } .req-atom.changed { border-left: 2px solid var(--pass); padding-left: 10px; } .req-atom-main { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 13px; } .req-atom-statement { flex: 1; min-width: 0; line-height: 1.5; } .req-atom-side { display: inline-flex; align-items: center; gap: 8px; flex: none; } .req-atom-meta { margin-top: 3px; font-size: 11px; } .req-atom-editor { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border-strong); } .espec-atom-editor { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border-strong); } /* The requirements panel hosts the document view's own component, which brings its own padding. */ .req-review-panel .espec-stack { gap: 12px; } .req-ready-band { display: flex; flex-direction: column; gap: 3px; margin-bottom: 20px; padding: 12px 16px; border: 1px solid rgba(47, 174, 114, 0.4); border-radius: var(--radius-sm); background: var(--pass-dim); } .req-ready-title { font-size: 14px; font-weight: 700; color: var(--pass); } .req-ready-band .dim { font-size: 12.5px; } .req-decisions-chat { margin-top: 18px; max-width: 720px; } .req-ready-band { position: relative; } .req-ready-band .phase-switch-link { margin-top: 6px; font-size: 12.5px; } .drawer-assumption.discussing, .drawer-open-item.discussing { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-dim); } /* The review, rendered as the conversation's closing turn. */ .thread-footer { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--border-strong); } .thread-footer .req-review { margin-top: 0; gap: 10px; } .thread-footer .req-review-title { font-size: 15px; } .thread-footer .req-review-panel { background: var(--bg-raised); } .req-decisions-chat .thread { max-height: min(64vh, 720px); } /* ---- review asked as chat turns ---- */ .review-turns { display: flex; flex-direction: column; gap: 10px; } .review-turn-progress { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } .msg.review-turn .msg-body { border: 1px solid var(--accent-border); background: linear-gradient(var(--accent-dim), var(--accent-dim)), var(--surface); } .review-turn-lead { line-height: 1.55; } .review-turn-value { margin-top: 7px; display: flex; align-items: baseline; gap: 8px; } .review-turn-basis { margin-top: 4px; font-size: 12.5px; line-height: 1.5; } .review-turn-source { margin-top: 7px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; font-size: 11.5px; } .review-turn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .review-turn-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .review-turn-answer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .review-turn-answer .drawer-note-input { flex: 1 1 220px; width: auto; } .review-turns .drawer-value-fields { margin-top: 10px; } .review-turn-hint { font-size: 12px; line-height: 1.5; padding-left: 44px; } /* ---- slim, history-free chat (board overview screen) ---- */ .chat-slim { margin-top: 20px; } .chat-panel-compact { display: flex; flex-direction: column; } .chat-panel-compact .composer { border-top: none; } .chat-panel-compact .composer textarea { min-height: 44px; max-height: 120px; } .chat-latest { padding: 10px 16px 14px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.55; color: var(--text-secondary); max-height: 132px; overflow-y: auto; } .review-turn-confirm { margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(229, 169, 61, 0.45); border-radius: var(--radius-sm); background: rgba(229, 169, 61, 0.08); font-size: 12.5px; line-height: 1.5; } .review-turn-confirm .review-turn-actions { margin-top: 8px; } .review-turn-settle { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-strong); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.5; } .review-turn-quote { padding: 8px 12px; border-left: 2px solid var(--accent); background: var(--bg-raised); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13px; line-height: 1.5; color: var(--text); } .review-turn-settle .review-turn-actions { margin-top: 2px; } .analyzing { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; } .analyzing-spinner { width: 13px; height: 13px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: analyzing-spin 0.8s linear infinite; } @keyframes analyzing-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .analyzing-spinner { animation: none; border-top-color: var(--accent); } }