Redesign sidebar and add LiiS logo

- Add view intro headers (audience + insights) to all 5 views
- Move view selection above product, change to dropdown
- Remove sidebar dividers
- Add LiiS logo top-right of main view
- Remove Repair/Scrap Rate cards, simplify to Grade A + Repair Cost row
- Repairability score 0-10 scale
- Fix Return Grade chart y-axis to 0-100
- Bump view description text size

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.py

@@ -72,7 +72,11 @@ st.markdown(f"""
 """, unsafe_allow_html=True)
 
 # Header
-st.title("LiiS Circular Economy Simulator")
+header_left, header_right = st.columns([3, 1])
+with header_left:
+    st.title("LiiS Circular Economy Simulator")
+with header_right:
+    st.image("liis branding/pasted-image-1.png", width=120)
 
 
 # Load product configs
@@ -92,6 +96,15 @@ products = load_products()
 # ============================================================
 # SIDEBAR - Product Selection & View Selection
 # ============================================================
+st.sidebar.header("View")
+selected_view = st.sidebar.selectbox(
+    "Select stakeholder view",
+    options=["Strategy", "Design", "Logistics", "Sourcing", "Market"],
+    index=0,
+    help="Each view shows relevant controls and insights"
+)
+
+
 st.sidebar.header("Product Selection")
 selected_product = st.sidebar.selectbox(
     "Choose a product",
@@ -103,16 +116,6 @@ config = products[selected_product]
 if "image_url" in products[selected_product].get("product", {}):
     st.sidebar.image(products[selected_product]["product"]["image_url"], use_column_width=True)
 
-st.sidebar.markdown("---")
-st.sidebar.header("View")
-selected_view = st.sidebar.radio(
-    "Select stakeholder view",
-    options=["Strategy", "Design", "Logistics", "Sourcing", "Market"],
-    index=0,
-    help="Each view shows relevant controls and insights"
-)
-
-st.sidebar.markdown("---")
 
 # ============================================================
 # TAB-SPECIFIC SIDEBAR CONTROLS
@@ -191,7 +194,7 @@ elif selected_view == "Design":
     if "design_damage_rate" not in st.session_state:
         st.session_state.design_damage_rate = 10
     if "design_repairability" not in st.session_state:
-        st.session_state.design_repairability = 4
+        st.session_state.design_repairability = 7
     if "design_spare_parts" not in st.session_state:
         st.session_state.design_spare_parts = 75
 
@@ -201,9 +204,9 @@ elif selected_view == "Design":
         help="% of products needing repair per cycle"
     )
     st.sidebar.slider(
-        "Repairability Score", 1, 6,
+        "Repairability Score", 0, 10,
         key="design_repairability",
-        help="How easy to repair returned products (1=difficult, 6=very easy)"
+        help="0 = everything scrapped, 10 = everything can be repaired"
     )
     st.sidebar.slider(
         "Spare Parts Availability", 0, 100,
@@ -213,7 +216,7 @@ elif selected_view == "Design":
 
     # Sync back to shared state so other views stay consistent
     _damage = st.session_state.design_damage_rate / 100
-    _repair_factor = st.session_state.design_repairability / 6
+    _repair_factor = st.session_state.design_repairability / 10
     _spare_factor = st.session_state.design_spare_parts / 100
     st.session_state.refurb_needed_pct = _damage * _repair_factor * _spare_factor + (_damage - _damage * _repair_factor * _spare_factor)
 
@@ -363,7 +366,11 @@ def calculate_breakeven_months(portfolio, monthly_lease, mfg_cost_nok, lease_ter
 # VIEW: STRATEGY (C-Level)
 # ============================================================
 if selected_view == "Strategy":
-    st.header("Portfolio Economics")
+    st.header("Strategy")
+    st.markdown(f'<p style="color: {COLORS["text_muted"]}; margin: 0; font-size: 1.15rem;">For C-level executives and business owners</p>', unsafe_allow_html=True)
+    st.markdown(f'<p style="color: {COLORS["text_muted"]}; margin: 0 0 1.5rem 0; font-size: 1.15rem;">Portfolio economics, break-even timeline, and operating margin</p>', unsafe_allow_html=True)
+
+    st.subheader("Portfolio Economics")
 
     # Get Strategy slider values
     portfolio_size = st.session_state.strategy_portfolio
@@ -651,11 +658,13 @@ if selected_view == "Strategy":
 # VIEW: DESIGN
 # ============================================================
 elif selected_view == "Design":
-    st.header("Product Design for Circularity")
+    st.header("Design")
+    st.markdown(f'<p style="color: {COLORS["text_muted"]}; margin: 0; font-size: 1.15rem;">For product designers and sustainability officers</p>', unsafe_allow_html=True)
+    st.markdown(f'<p style="color: {COLORS["text_muted"]}; margin: 0 0 1.5rem 0; font-size: 1.15rem;">Recovery rate, repairability impact, and component failure analysis</p>', unsafe_allow_html=True)
 
     # ── Design-specific calculations from 3 sliders ──
     d_damage_rate = st.session_state.design_damage_rate / 100
-    d_repairability_factor = st.session_state.design_repairability / 6
+    d_repairability_factor = st.session_state.design_repairability / 10
     d_spare_parts_factor = st.session_state.design_spare_parts / 100
 
     d_grade_a_pct = 1 - d_damage_rate
@@ -701,46 +710,22 @@ elif selected_view == "Design":
 
     st.markdown('<div style="margin-top: 1.5rem;"></div>', unsafe_allow_html=True)
 
-    # ── 4c. Supporting metrics (2x2 grid) ──
+    # ── 4c. Supporting metrics (row) ──
+    repair_cost_nok = d_repair_cost * 10  # EUR to NOK approx
     sup_left, sup_right = st.columns(2)
 
     with sup_left:
-        st.markdown(f'<p style="color: {COLORS["text_muted"]}; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem;">Repair & Recovery</p>', unsafe_allow_html=True)
-        # Repair Rate
-        st.markdown(f"""
-        <div style="text-align: center; padding: 1.5rem; background: {COLORS['surface']};
-            border-radius: 10px; border: 1px solid {COLORS['border']}; margin-bottom: 0.75rem;">
-            <p style="color: {COLORS['text_muted']}; margin: 0 0 0.5rem 0;
-               font-size: 1.2rem; font-weight: 700;">Repair Rate</p>
-            <p style="color: {COLORS['warning']}; margin: 0;
-               font-size: 2.4rem; font-weight: 700;">{d_grade_b_pct:.1%}</p>
-        </div>
-        """, unsafe_allow_html=True)
-        # Scrap Rate
         st.markdown(f"""
         <div style="text-align: center; padding: 1.5rem; background: {COLORS['surface']};
             border-radius: 10px; border: 1px solid {COLORS['border']};">
-            <p style="color: {COLORS['text_muted']}; margin: 0 0 0.5rem 0;
-               font-size: 1.2rem; font-weight: 700;">Scrap Rate</p>
-            <p style="color: {COLORS['negative']}; margin: 0;
-               font-size: 2.4rem; font-weight: 700;">{d_grade_c_pct:.1%}</p>
-        </div>
-        """, unsafe_allow_html=True)
-
-    with sup_right:
-        st.markdown(f'<p style="color: {COLORS["text_muted"]}; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem;">Waste & Quality</p>', unsafe_allow_html=True)
-        # Grade A Rate
-        st.markdown(f"""
-        <div style="text-align: center; padding: 1.5rem; background: {COLORS['surface']};
-            border-radius: 10px; border: 1px solid {COLORS['border']}; margin-bottom: 0.75rem;">
             <p style="color: {COLORS['text_muted']}; margin: 0 0 0.5rem 0;
                font-size: 1.2rem; font-weight: 700;">Grade A Rate</p>
             <p style="color: {COLORS['positive']}; margin: 0;
                font-size: 2.4rem; font-weight: 700;">{d_grade_a_pct:.1%}</p>
         </div>
         """, unsafe_allow_html=True)
-        # Repair Cost per Unit
-        repair_cost_nok = d_repair_cost * 10  # EUR to NOK approx
+
+    with sup_right:
         st.markdown(f"""
         <div style="text-align: center; padding: 1.5rem; background: {COLORS['surface']};
             border-radius: 10px; border: 1px solid {COLORS['border']};">
@@ -748,8 +733,6 @@ elif selected_view == "Design":
                font-size: 1.2rem; font-weight: 700;">Repair Cost per Unit</p>
             <p style="color: {COLORS['secondary']}; margin: 0;
                font-size: 2.4rem; font-weight: 700;">{sfmt(int(repair_cost_nok))} <span style="font-size: 1.1rem; font-weight: 400; color: {COLORS['text_subtle']};">NOK</span></p>
-            <p style="color: {COLORS['text_subtle']}; margin: 0.3rem 0 0 0;
-               font-size: 0.8rem;">(Affected by repairability score)</p>
         </div>
         """, unsafe_allow_html=True)
 
@@ -771,11 +754,11 @@ elif selected_view == "Design":
         title="Return Grade Distribution", text="Percentage",
     )
     fig_grades.update_traces(texttemplate='%{text:.1f}%', textposition='outside')
-    fig_grades.update_layout(showlegend=False, yaxis_title="% of Returns")
+    fig_grades.update_layout(showlegend=False, yaxis_title="% of Returns", yaxis=dict(range=[0, 100]))
     st.plotly_chart(fig_grades)
 
     st.info(f"**Design insight:** At {st.session_state.design_damage_rate}% damage rate with repairability score "
-            f"{st.session_state.design_repairability}/6, "
+            f"{st.session_state.design_repairability}/10, "
             f"**{d_grade_b_pct:.1%}** of products can be repaired while **{d_grade_c_pct:.1%}** are scrapped.")
 
     st.markdown("---")
@@ -886,8 +869,9 @@ elif selected_view == "Design":
 # VIEW: LOGISTICS
 # ============================================================
 elif selected_view == "Logistics":
-    st.header("Logistics: Operations & Warehouse Planning")
-    st.markdown("*For logistics managers and warehouse operations*")
+    st.header("Logistics")
+    st.markdown(f'<p style="color: {COLORS["text_muted"]}; margin: 0; font-size: 1.15rem;">For logistics managers and warehouse operations</p>', unsafe_allow_html=True)
+    st.markdown(f'<p style="color: {COLORS["text_muted"]}; margin: 0 0 1.5rem 0; font-size: 1.15rem;">Return flow, grade distribution, cost per cycle, and fleet tracking</p>', unsafe_allow_html=True)
 
     # Return assumptions summary
     st.subheader("Return Flow Assumptions")
@@ -1003,8 +987,9 @@ elif selected_view == "Logistics":
 # VIEW: SOURCING
 # ============================================================
 elif selected_view == "Sourcing":
-    st.header("Sourcing: Material Costs & Supply")
-    st.markdown("*For procurement, supply chain, and finance*")
+    st.header("Sourcing")
+    st.markdown(f'<p style="color: {COLORS["text_muted"]}; margin: 0; font-size: 1.15rem;">For procurement, supply chain, and finance</p>', unsafe_allow_html=True)
+    st.markdown(f'<p style="color: {COLORS["text_muted"]}; margin: 0 0 1.5rem 0; font-size: 1.15rem;">Bill of materials, recycled content impact, and manufacturing cost breakdown</p>', unsafe_allow_html=True)
 
     has_materials = "materials" in config and "bom" in config.get("materials", {})
     has_labor = "labor" in config
@@ -1133,8 +1118,9 @@ elif selected_view == "Sourcing":
 # VIEW: MARKET
 # ============================================================
 elif selected_view == "Market":
-    st.header("Market: Customer Value & Positioning")
-    st.markdown("*For marketing, sales, and business development*")
+    st.header("Market")
+    st.markdown(f'<p style="color: {COLORS["text_muted"]}; margin: 0; font-size: 1.15rem;">For marketing, sales, and business development</p>', unsafe_allow_html=True)
+    st.markdown(f'<p style="color: {COLORS["text_muted"]}; margin: 0 0 1.5rem 0; font-size: 1.15rem;">Customer value proposition, pricing analysis, and environmental impact story</p>', unsafe_allow_html=True)
 
     # Customer Value Proposition
     st.subheader("Customer Value Proposition")