diff --git a/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_timeline.scss b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_timeline.scss
new file mode 100644
index 00000000..db21f718
--- /dev/null
+++ b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_timeline.scss
@@ -0,0 +1,160 @@
+// ============================================================================
+// Fusion Plating — Portal · Vertical timeline (job detail page)
+// ============================================================================
+
+.o_fp_timeline {
+    position: relative;
+
+    // Spine (gray default)
+    &::before {
+        content: '';
+        position: absolute;
+        left: 9px;
+        top: 10px;
+        bottom: 10px;
+        width: 2px;
+        background: $fp-card-border;
+    }
+    // Active portion (filled to height of completed stages, set inline by template)
+    .o_fp_timeline_spine_active {
+        position: absolute;
+        left: 9px;
+        top: 10px;
+        width: 2px;
+        background: $fp-teal;
+        // height set inline via style attribute
+    }
+
+    .o_fp_timeline_item {
+        position: relative;
+        padding-left: 2rem;
+        padding-bottom: 1.1rem;
+
+        &:last-child { padding-bottom: 0; }
+
+        .o_fp_timeline_dot {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 20px;
+            height: 20px;
+            border-radius: $fp-radius-pill;
+            background: $fp-card-bg;
+            border: 2px solid $fp-card-border;
+        }
+        &.o_fp_timeline_done .o_fp_timeline_dot {
+            background: $fp-gradient-primary;
+            border: none;
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: .65rem;
+            font-weight: 700;
+        }
+        &.o_fp_timeline_active .o_fp_timeline_dot {
+            background: $fp-card-bg;
+            border: 2.5px solid $fp-teal;
+            box-shadow: $fp-glow-ring-teal;
+        }
+
+        .o_fp_timeline_title {
+            font-size: .92rem;
+            color: $fp-text;
+            font-weight: 500;
+            line-height: 1.2;
+        }
+        &.o_fp_timeline_active .o_fp_timeline_title {
+            color: $fp-teal;
+            font-weight: 700;
+            font-size: .95rem;
+        }
+        &.o_fp_timeline_pending .o_fp_timeline_title {
+            color: $fp-muted;
+        }
+        .o_fp_timeline_time {
+            font-size: .78rem;
+            color: $fp-muted;
+            margin-top: .2rem;
+        }
+        &.o_fp_timeline_active .o_fp_timeline_time { color: $fp-teal; }
+        &.o_fp_timeline_pending .o_fp_timeline_time { color: $fp-disabled; }
+
+        .o_fp_timeline_note {
+            font-size: .74rem;
+            color: $fp-text-body;
+            margin-top: .35rem;
+            padding: .4rem .6rem;
+            background: $fp-page-bg;
+            border-radius: 6px;
+            display: inline-block;
+            &.o_fp_timeline_note_success { background: $fp-success-bg; color: $fp-success-text; }
+            &.o_fp_timeline_note_active { background: #eff6ff; color: $fp-teal-dark; line-height: 1.4; }
+        }
+    }
+}
+
+// Detail-page outer wrapper
+.o_fp_job_detail {
+    background: $fp-page-bg;
+    padding: $fp-space-6;
+    border-radius: $fp-radius-card;
+    border: 1px solid $fp-card-border;
+    font-family: $fp-font;
+
+    .o_fp_job_detail_hero {
+        @extend .o_fp_card;
+        margin-bottom: $fp-space-5;
+        padding-bottom: $fp-space-4;
+
+        h2 { margin: 0 0 .35rem 0; font-size: 1.5rem; color: $fp-text; font-weight: 600; }
+        .o_fp_detail_label {
+            font-size: .7rem;
+            color: $fp-muted;
+            letter-spacing: .05em;
+            text-transform: uppercase;
+            font-weight: 500;
+            margin-bottom: .25rem;
+        }
+        .o_fp_detail_subtitle {
+            color: $fp-text-body;
+            font-size: .92rem;
+            margin-bottom: .7rem;
+        }
+        .o_fp_detail_facts {
+            display: flex;
+            gap: 1.5rem;
+            flex-wrap: wrap;
+            color: $fp-text-body;
+            font-size: .82rem;
+            .o_fp_fact_label { color: $fp-muted-light; }
+            .o_fp_fact_value { color: $fp-text; font-weight: 600; }
+        }
+    }
+
+    .o_fp_job_detail_grid {
+        display: grid;
+        grid-template-columns: 1.1fr 1fr;
+        gap: $fp-space-5;
+
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .o_fp_job_detail_footer {
+        @extend .o_fp_card;
+        margin-top: $fp-space-5;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem;
+
+        .o_fp_related_links {
+            font-size: .82rem;
+            color: $fp-text-body;
+            a { color: $fp-teal; text-decoration: none; margin: 0 .55rem; }
+            a.disabled { color: $fp-muted-light; }
+        }
+    }
+}