/* ============================================================ Project page middle column — shared widget CSS. Source of truth for every visual treatment in the middle column of /projects// (Surface A, static SEO pages) and /app's #vault-project-page (Surface B, in-app project page). Architectural rule (set by Clint 2026-05-23 during Brief 76 ratification): "one common backend, one common project page frontend (inside the app, and on the website) so that future improvements are common across both. We should not rebuild new functionality where existing functions already exist." Surfaces consume this file via in their HTML , AFTER /puna/website/_components/design-tokens.css so the palette + typography tokens are resolved. What lives here: - .pp-* hero / KPI tiles / sections / snapshot grid / Show more / Map (real-surface rules only — mockup-only background gradients live inline on the v3 preview). - .ds-* Document Structure 3-row list + gated sub-folders + hover tooltip + community-contrib inline panel. - .pi-* Project intelligence rows + contrib rows + folded- in upload affordance. - .pp-brief / .pp-brief-result-wrap / .stream-cursor — Agent Research card + streaming-reveal result panel. - .rail-* Explore Related rails (3-card / 4-card / inline). - @keyframes stream-blink for the streaming cursor. What does NOT live here (per surface's shell owns it): - Top bar, site nav, .app grid, .sidebar-left / .sidebar- right, .main / .main-topbar, .adviser-bar mount. - Mockup-only chrome (.pp-map painted-background, .pp-map- mockup-pins, .v3-callout overlay). Tokens consumed from design-tokens.css: --navy, --navy-deep, --navy-mid, --cyan, --cyan-bright, --cyan-dim, --white, --white-soft, --white-muted, --white-dim, --border, --border-light, --font-heading, --font-body, --font-mono. Tokens defined here (widget-local — "gated state" palette was excluded from canonical tokens per _config/design- tokens.md § page-scoped rule; living here keeps both surfaces consistent without polluting global tokens): --orange, --orange-dim, --violet. Authored 2026-05-23 by Master of project page (chat 1). Ratifies Brief 76 v3 mockup as the visual contract. ============================================================ */ :root { /* Widget-local: gated-folder + community-badge accent palette. */ --orange: #ff9b3a; --orange-dim: rgba(255, 155, 58, 0.10); --violet: #a78bfa; } /* ─── Hero ─── */ .pp-hero { padding: 1.6rem 0 1.2rem; border-bottom: 1px solid var(--border); position: relative; } .pp-hero-eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; } h1.pp-hero-title { font-family: var(--font-heading); font-size: 2rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; color: var(--white); line-height: 1.15; } .pp-hero-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 0.88rem; color: var(--white-muted); } .pp-hero-meta .dot { color: var(--white-dim); } .pp-hero-meta a { color: var(--white-muted); text-decoration: underline; text-decoration-color: var(--cyan-dim); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 0.18s ease, color 0.18s ease; } .pp-hero-meta a:hover, .pp-hero-meta a:focus-visible { color: var(--white); text-decoration-color: var(--cyan); outline: none; } .pp-pill { display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.10em; text-transform: uppercase; padding: 3px 9px; background: rgba(0, 200, 200, 0.10); color: var(--cyan); border-radius: 3px; margin-left: 6px; } /* Q3 (Brief 76) — Add-to-watchlist CTA — v2 styling + 150ms opacity cross-fade on "+" → "✓" state swap (motion refinement). */ .pp-add-watchlist { position: absolute; top: 1.6rem; right: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 600; color: var(--navy-deep); background: var(--cyan); border: 1px solid var(--cyan); border-radius: 3px; padding: 11px 18px; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .pp-add-watchlist:hover { background: var(--cyan-bright); box-shadow: 0 0 18px rgba(0, 200, 200, 0.35); } .pp-add-watchlist.is-added { background: transparent; color: var(--cyan); border-color: var(--cyan); } .pp-add-watchlist .pp-add-label { display: inline-block; transition: opacity 0.15s ease; } .pp-add-watchlist.is-fading .pp-add-label { opacity: 0; } .pp-add-watchlist:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 2px; } /* ─── KPI tiles — 4 in a row; Q4 rhythm: 1.5rem gap above the Map ─── */ .pp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin: 1.2rem 0 1.5rem; } .pp-tile { background: rgba(11, 26, 46, 0.42); border: 1px solid var(--border-light); border-radius: 6px; padding: 0.9rem 1.1rem; } .pp-tile-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white-dim); } .pp-tile-val { font-size: 1.3rem; font-weight: 600; margin-top: 6px; color: var(--white); word-break: break-word; line-height: 1.2; } .pp-tile-val.highlight { color: var(--cyan); } .pp-tile-val.is-dim { color: var(--white-dim); font-weight: 400; } @media (max-width: 880px) { .pp-tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .pp-tiles { grid-template-columns: 1fr; } } /* ─── Generic section card (v2 contract preserved) ─── */ .pp-section { margin-bottom: 1rem; padding: 1.1rem 1.3rem; background: rgba(11, 26, 46, 0.42); border: 1px solid var(--border-light); border-radius: 6px; } .pp-h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; color: var(--white); margin: 0 0 0.7rem; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .pp-h3-sub { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--white-dim); } /* ─── Precomputed AI body — paragraph rhythm matches live ─── */ .pp-precomputed { font-size: 0.92rem; color: var(--white-soft); line-height: 1.6; } .pp-precomputed p { margin-bottom: 0.7rem; } .pp-precomputed p:last-child { margin-bottom: 0; } .pp-precomputed strong { color: var(--white); font-weight: 600; } .pp-precomputed em { color: var(--white-muted); } /* ─── Project Summary snapshot table (Iter 5 — app-style) ─── Compact 2-3 line prose at top + 2-col mono key-value grid. */ .pp-snapshot-prose { font-size: 0.92rem; color: var(--white-soft); line-height: 1.55; margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px dashed var(--border-light); } .pp-snapshot-prose strong { color: var(--white); font-weight: 600; } .pp-snapshot-prose em { color: var(--white-muted); font-style: normal; } .pp-snapshot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; } .pp-snap-cell { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--border-light); font-family: var(--font-mono); font-size: 0.78rem; } /* Remove the bottom border on the last row (last 2 cells in a row-major 2-col grid). Works because grid auto-flow is row-by-row → last two cells are the bottom row. */ .pp-snap-cell:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; } .pp-snap-label { color: var(--white-muted); letter-spacing: 0.04em; } .pp-snap-val { color: var(--white); font-weight: 500; text-align: right; } .pp-snap-val.is-dim { color: var(--white-dim); font-weight: 400; } @media (max-width: 720px) { .pp-snapshot-grid { grid-template-columns: 1fr; gap: 0; } .pp-snap-cell:nth-last-child(2) { border-bottom: 1px dashed var(--border-light); padding-bottom: 0.55rem; } } /* ─── Iter 4 — collapsible AI section: first paragraph visible, rest hidden behind Show more / Show less chip toggle. ─── */ .pp-precomputed-more { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .pp-precomputed-more.is-open { max-height: 800px; } .pp-precomputed-more > p:first-child { margin-top: 0.7rem; } /* Iter 6 — bordered chip-like button with cyan-dim tint, brightens on hover. */ .pp-show-more { display: inline-flex; align-items: center; gap: 9px; margin-top: 0.9rem; padding: 8px 14px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 500; color: var(--cyan); background: rgba(0, 200, 200, 0.06); border: 1px solid rgba(0, 200, 200, 0.35); border-radius: 3px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .pp-show-more:hover { background: rgba(0, 200, 200, 0.12); border-color: var(--cyan); color: var(--cyan-bright); } .pp-show-more:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 2px; } .pp-show-more-chev { display: inline-flex; align-items: center; transition: transform 0.2s ease; font-size: 0.9rem; line-height: 1; } .pp-show-more.is-open .pp-show-more-chev { transform: rotate(180deg); } /* ─── Map (Mapbox tile wraps live in production; .pp-map sets the sized canvas the Mapbox JS attaches to). Surface inline background painters used in the v3 mockup are NOT shipped — production loads Mapbox Satellite Streets v12 per DECISION-MAPBOX-SATELLITE-TILE- LAYER-2026-05-23. ─── */ .pp-map-wrap { position: relative; } .pp-map { height: 360px; border-radius: 4px; overflow: hidden; position: relative; border: 1px solid var(--border-light); } .pp-map-label { position: absolute; bottom: 8px; right: 10px; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); background: rgba(6, 15, 29, 0.6); padding: 3px 7px; border-radius: 2px; } .pp-map-meta { margin-top: 0.7rem; font-size: 0.82rem; color: var(--white-muted); display: flex; flex-wrap: wrap; gap: 1rem; } .pp-map-meta strong { color: var(--white-soft); font-weight: 500; } /* ─── Q5(a) — Agent Research / Build brief card ─── */ .pp-brief { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; background: linear-gradient(180deg, rgba(0, 200, 200, 0.06), rgba(0, 200, 200, 0.02)); border: 1px solid rgba(0, 200, 200, 0.25); border-radius: 6px; margin-bottom: 1rem; } .pp-brief-copy { min-width: 0; } .pp-brief-title { font-size: 1rem; font-weight: 600; color: var(--white); } .pp-brief-sub { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--cyan); margin: 4px 0; } .pp-brief-bespoke { font-size: 0.82rem; color: var(--white-muted); max-width: 60ch; line-height: 1.5; } .pp-brief-bespoke em { color: var(--white-dim); font-style: italic; } .pp-brief-btn { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-deep); background: var(--cyan); border: 1px solid var(--cyan); border-radius: 3px; padding: 11px 18px; cursor: pointer; font-weight: 600; white-space: nowrap; flex-shrink: 0; transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .pp-brief-btn:hover { background: var(--cyan-bright); box-shadow: 0 0 18px rgba(0, 200, 200, 0.35); } /* ─── Build brief inline expand panel (Iter 3) ─── Click Build brief → brief result slides open below the card. */ .pp-brief-result-wrap { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, margin-bottom 0.3s ease, margin-top 0.3s ease; margin-bottom: 0; } .pp-brief-result-wrap.is-open { max-height: 2000px; margin-top: -0.6rem; /* close the visual seam to the .pp-brief above */ margin-bottom: 1rem; } .pp-brief-result { padding: 1.1rem 1.3rem; background: rgba(11, 26, 46, 0.42); border: 1px solid var(--border-light); border-top: 1px dashed rgba(0, 200, 200, 0.25); border-radius: 0 0 6px 6px; } .pp-brief-result h4 { font-size: 1rem; font-weight: 600; color: var(--white); margin: 0 0 0.5rem; } .pp-brief-result-one-line { font-size: 0.95rem; color: var(--white-soft); margin-bottom: 0.9rem; font-style: italic; } .pp-brief-result-section { margin-top: 0.9rem; } .pp-brief-result-section h5 { font-size: 0.78rem; font-weight: 600; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.4rem; } .pp-brief-result-section p { font-size: 0.9rem; color: var(--white-soft); margin-bottom: 0.5rem; line-height: 1.55; } .pp-brief-result-meta { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--border-light); font-family: var(--font-mono); font-size: 0.7rem; color: var(--white-dim); letter-spacing: 0.04em; } /* Streaming cursor that blinks at the end of whatever element is currently being written. .stream-cursor is appended by the JS module per word tick. */ .stream-cursor { display: inline-block; width: 7px; height: 1em; background: var(--cyan); margin-left: 2px; vertical-align: text-bottom; animation: stream-blink 0.9s steps(2) infinite; } @keyframes stream-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* ─── Document Structure list (v2 sdr-list pattern verbatim) ─── Three rows: Project Snapshot (public, static), Gated folders (gated, hover tooltip), Community contributed intelligence (clickable row that expands inline panel below). */ .ds-list { display: flex; flex-direction: column; gap: 7px; } .ds-row { display: flex; align-items: center; gap: 12px; padding: 0.7rem 0.9rem; background: rgba(6, 15, 29, 0.4); border: 1px solid var(--border-light); border-radius: 3px; font-size: 0.88rem; width: 100%; text-align: left; font-family: inherit; color: inherit; position: relative; } .ds-row.is-gated { color: var(--white-dim); border-color: rgba(255, 155, 58, 0.20); background: rgba(255, 155, 58, 0.03); cursor: help; } .ds-row.is-contrib { cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .ds-row.is-contrib:hover { border-color: rgba(0, 200, 200, 0.30); background: rgba(0, 200, 200, 0.04); } /* Project Snapshot row — clickable scroll anchor (2026-05-24, Clint walk follow-up). Same hover treatment as the contrib row so the affordance reads consistently across the list. */ .ds-row.is-snapshot { cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .ds-row.is-snapshot:hover, .ds-row.is-snapshot:focus-visible { border-color: rgba(0, 200, 200, 0.30); background: rgba(0, 200, 200, 0.04); outline: none; } .ds-icon { width: 22px; text-align: center; color: var(--cyan); font-size: 0.95rem; flex-shrink: 0; } .ds-row.is-gated .ds-icon { color: var(--orange); } .ds-name { flex: 1; color: var(--white-soft); min-width: 0; } .ds-row.is-gated .ds-name { color: var(--white-muted); } .ds-count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--white-dim); letter-spacing: 0.04em; } .ds-chip { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.10em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; background: rgba(0, 200, 200, 0.10); color: var(--cyan); } .ds-chip.is-gated { background: var(--orange-dim); color: var(--orange); } .ds-chip.is-action { background: rgba(0, 200, 200, 0.10); color: var(--cyan); transition: background 0.15s ease, color 0.15s ease; } .ds-row.is-contrib:hover .ds-chip.is-action { background: var(--cyan); color: var(--navy-deep); } .ds-row.is-contrib.is-open .ds-chip.is-action { background: var(--cyan); color: var(--navy-deep); } /* Tooltip on .is-gated row — hover-reveal small popover above the row. */ .ds-tooltip { position: absolute; bottom: calc(100% + 6px); right: 8px; background: rgba(6, 15, 29, 0.96); color: var(--white); border: 1px solid rgba(255, 155, 58, 0.35); border-radius: 3px; padding: 6px 10px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; transform: translateY(4px); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); z-index: 10; } .ds-row.is-gated:hover .ds-tooltip, .ds-row.is-gated:focus-visible .ds-tooltip { opacity: 1; transform: translateY(0); } /* Inline panel that opens below the Community-contributed row. */ .ds-contrib-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, margin-top 0.3s ease; margin-top: 0; } .ds-contrib-panel.is-open { max-height: 1600px; margin-top: 0.8rem; } .ds-contrib-panel-inner { padding: 0.9rem 1rem; background: rgba(6, 15, 29, 0.4); border: 1px solid var(--border-light); border-radius: 3px; } /* ─── Iter 5 — Gated sub-folder list (expands below the parent gated row) ─── */ .ds-gated-sub-list { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, margin-top 0.3s ease, margin-bottom 0.3s ease; margin-top: 0; margin-bottom: 0; display: flex; flex-direction: column; gap: 5px; padding-left: 28px; /* indent to align under the lock icon of parent row */ } .ds-gated-sub-list.is-open { max-height: 700px; margin-top: 5px; margin-bottom: 2px; } .ds-sub-row { display: flex; align-items: center; gap: 12px; padding: 0.55rem 0.85rem; background: rgba(255, 155, 58, 0.025); border: 1px solid rgba(255, 155, 58, 0.15); border-radius: 3px; font-size: 0.84rem; color: var(--white-muted); /* Brief 78A follow-up (Clint walk 2026-05-24) — relative positioning so the tooltip can absolute-position above each sub-row. Each gated sub-folder gets the same access-rule tooltip on hover so the rule reads consistently across all gated content rows, not just the parent. */ position: relative; cursor: help; } .ds-sub-row .ds-icon { color: var(--orange); font-size: 0.85rem; } .ds-sub-row .ds-name { color: var(--white-muted); } .ds-sub-row .ds-count { color: var(--white-dim); font-size: 0.66rem; } .ds-sub-row .ds-chip { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.10em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; background: var(--orange-dim); color: var(--orange); } .ds-sub-row:hover .ds-tooltip, .ds-sub-row:focus-visible .ds-tooltip { opacity: 1; transform: translateY(0); } /* ─── Project Intelligence rows (alternate / legacy view used inside the contrib panel and in the in-app project page community block). .pi-row is the public/gated record row. .pi-contrib-* are the community-contributed records shown in the inline panel. ─── */ .pi-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0.9rem; } .pi-row { display: flex; align-items: center; gap: 12px; padding: 0.7rem 0.9rem; background: rgba(6, 15, 29, 0.4); border: 1px solid var(--border-light); border-radius: 3px; font-size: 0.88rem; } .pi-row.is-gated { color: var(--white-dim); border-color: rgba(255, 155, 58, 0.20); background: rgba(255, 155, 58, 0.03); } .pi-icon { width: 22px; text-align: center; color: var(--cyan); font-size: 0.95rem; } .pi-row.is-gated .pi-icon { color: var(--orange); } .pi-name { flex: 1; color: var(--white-soft); } .pi-row.is-gated .pi-name { color: var(--white-muted); } .pi-count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--white-dim); letter-spacing: 0.04em; } .pi-chip { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.10em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; background: rgba(0, 200, 200, 0.10); color: var(--cyan); } .pi-chip.is-gated { background: var(--orange-dim); color: var(--orange); } /* Community contributions sub-block. */ .pi-contrib-block { margin-top: 0.5rem; } .pi-eyebrow { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--white-muted); margin-bottom: 0.6rem; display: flex; align-items: baseline; justify-content: space-between; } .pi-eyebrow .pi-eyebrow-count { color: var(--white-dim); font-family: var(--font-mono); font-size: 0.66rem; } .pi-contrib-rows { display: flex; flex-direction: column; border-top: 1px dashed var(--border-light); margin-bottom: 0.9rem; } .pi-contrib-row { padding: 0.8rem 0; border-bottom: 1px dashed var(--border-light); } .pi-contrib-head { display: flex; align-items: center; gap: 12px; margin-bottom: 5px; } .pi-contrib-badge { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.10em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; } .pi-contrib-badge.known { background: rgba(0, 200, 200, 0.10); color: var(--cyan); } .pi-contrib-badge.anon { background: rgba(155, 171, 196, 0.10); color: var(--white-muted); } .pi-contrib-badge.web { background: rgba(167, 139, 250, 0.10); color: var(--violet); } .pi-contrib-date { font-family: var(--font-mono); font-size: 0.66rem; color: var(--white-dim); } .pi-contrib-body { font-size: 0.86rem; color: var(--white-soft); margin-bottom: 4px; } .pi-contrib-impact { font-size: 0.78rem; color: var(--white-muted); } .pi-contrib-impact em { color: var(--cyan); font-style: normal; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 6px; } .pi-contrib-empty { font-size: 0.84rem; color: var(--white-muted); margin-bottom: 0.6rem; line-height: 1.5; } /* Folded-in upload widget — calmer than the standalone orange block. Real implementation hooks .pi-upload click into the existing feed- intelligence widget JS (_components/feed-intelligence/widget.js) with the same fi-stage state machine. Iter 6 — stretches full width of the panel so it reads as a proper drop zone. */ .pi-upload { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0.85rem 1rem; background: rgba(6, 15, 29, 0.5); border: 1px dashed rgba(0, 200, 200, 0.35); border-radius: 4px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .pi-upload:hover { border-color: var(--cyan); background: rgba(0, 200, 200, 0.04); } .pi-upload-copy { font-size: 0.86rem; color: var(--white-soft); } .pi-upload-copy strong { color: var(--white); font-weight: 600; } .pi-upload-cta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); background: transparent; border: 1px solid var(--cyan); border-radius: 3px; padding: 7px 12px; white-space: nowrap; } .pi-upload-cta:hover { background: var(--cyan); color: var(--navy-deep); } /* ─── Explore Related rails (DECISION-EXPLORE-RELATED-CONDITIONAL- LOGIC-LOCKED-2026-05-17) — 3-rail logic: owner / deposit / country with stage fallback. ─── */ .pp-rails { /* sits inside .pp-section */ } .rail { margin-bottom: 1.2rem; } .rail:last-child { margin-bottom: 0; } .rail-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; gap: 1rem; flex-wrap: wrap; } .rail-title { font-size: 0.92rem; color: var(--white-soft); } .rail-title em { color: var(--white); font-weight: 600; font-style: normal; } .rail-tail { font-family: var(--font-mono); font-size: 0.7rem; color: var(--cyan); letter-spacing: 0.04em; } .rail-tail:hover { color: var(--cyan-bright); } .rail-cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content; align-items: start; gap: 0.7rem; } .rail-cards--four { grid-template-columns: repeat(4, 1fr); } .rail-inline { font-size: 0.86rem; color: var(--white-muted); } .rail-inline a { color: var(--white-soft); text-decoration: underline; text-decoration-color: var(--cyan-dim); text-underline-offset: 3px; } .rail-inline a:hover { color: var(--white); text-decoration-color: var(--cyan); } .rail-card { padding: 0.7rem 0.85rem; background: rgba(6, 15, 29, 0.45); border: 1px solid var(--border-light); border-radius: 4px; color: var(--white); display: block; text-decoration: none; min-width: 0; transition: border-color 0.2s ease, background 0.2s ease; } .rail-card:hover, .rail-card:focus-visible { border-color: rgba(0, 200, 200, 0.3); background: rgba(6, 15, 29, 0.6); color: var(--white); outline: none; } .rail-card-name { font-size: 0.9rem; font-weight: 600; color: var(--white); } .rail-card-meta { display: flex; gap: 5px; margin: 4px 0; flex-wrap: wrap; } .rail-chip { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; background: rgba(255, 255, 255, 0.04); border-radius: 2px; color: var(--white-muted); } .rail-chip--cyan { background: rgba(0, 200, 200, 0.10); color: var(--cyan); } .rail-card-last { font-size: 0.72rem; color: var(--white-dim); } .rail-card-last strong { color: var(--white); font-weight: 500; }