modulos_internal/contracts/progress.css

/* Container for 2 synced rows */
            .steps { margin-bottom: 1rem; }

            /* Top row = your existing arrows (kept as-is) */
            .step-menu {
                display: flex;
                flex-wrap: wrap;
                padding: 0;
                list-style: none;
                justify-content: center;
                margin: 0 0 .25rem 0;
            }
            .step-menu li {
                position: relative;
                flex: 1 1 auto;
                min-width: 120px;
                max-width: 160px;   /* match date row to keep columns aligned */
                text-align: center;
                background: #e9ecef;
                color: #6c757d;
                font-weight: 600;
                padding: .8rem 1rem 1rem 2rem;
                margin: .25rem;
                transition: all .3s ease;
                z-index: 1;
            }
            .step-menu li:before {
                content: '';
                position: absolute;
                border: 27px solid transparent;
                border-left-color: #fff;
                top:0; right: -60px;
            }
            .step-menu li:after {
                content: '';
                position: absolute;
                border: 26px solid transparent;
                border-left-color: #ddd;
                top:0; right: -50px;
            }

            /* keep your special paddings so arrows look right */
            .step-menu li:nth-child(1){ z-index:700; margin-left:0; padding-left:50px; }
            .step-menu li:nth-child(2){ z-index:600; }
            .step-menu li:nth-child(3){ z-index:500; }
            .step-menu li:nth-child(4){ z-index:400; }
            .step-menu li:nth-child(5){ z-index:300; }
            .step-menu li:nth-child(6){ z-index:200; }
            .step-menu li:nth-child(7){ z-index:100; padding-right:10px; }
            .step-menu li:nth-child(7):after,
            .step-menu li:nth-child(7):before { border:none; }

            /* State colours (same as you had) */
            .step-menu li.current  { background:#97846E; color:#EADFD7; }
            .step-menu li.current:after { border-left-color:#97846E; }
            .step-menu li.pending  { background:#e9ecef; color:#055160; }
            .step-menu li.pending:after { border-left-color:#e9ecef; }
            .step-menu li.complete { background:#d1e7dd; color:#0f5132; }
            .step-menu li.complete:after { border-left-color:#d1e7dd; }
            .step-menu li.upcoming { background:#dee2e6; color:#495057; }
            .step-menu li.upcoming:after { border-left-color:#dee2e6; }

            /* Bottom row = dates */
            .step-dates{
                display:flex;
                flex-wrap:wrap;
                padding:0;
                list-style:none;
                justify-content:center;
                margin: 0;
            }
            .step-dates li{
                flex: 1 1 auto;
                min-width: 120px;
                max-width: 160px;   /* == step-menu li */
                text-align:center;
                margin: .25rem;
                padding: .25rem 1rem .5rem 1rem; /* mirror left pad so column widths match */
                font-size: .95rem;
                line-height: 1.2;
                white-space: nowrap;
            }
            .step-dates li:nth-child(1){ padding-left:50px; }
            .step-dates li:nth-child(7){ padding-right:10px; }

            /* Date colours by state */
            .step-dates li.complete { color:#0f5132; }
            .step-dates li.current  { color:#7c6a57; font-weight:600; }
            .step-dates li.pending,
            .step-dates li.upcoming { color:#6c757d; }

            /* Mobile: stack nicely */
            @media (max-width: 1399px) {
                .step-menu li, .step-dates li { flex: 1 1 100%; max-width: 100%; }
                .step-menu li, .step-dates li { padding-left: 1rem; padding-right: 1rem; }

                .step-menu li::before,
                .step-menu li::after {
                    content: none !important;   /* removes the generated box */
                    /* fallback (older browsers): */
                    display: none !important;
                    border: 0 !important;
                }
            }

            .step-menu li.complete.current {
                background-color: #d1e7dd; /* keep the 'complete' green */
                color: #0f5132;
                box-shadow: 0 0 0.5rem rgba(99, 90, 74, .35);
                border: 2px solid #97846E; /* subtle emphasis */
            }

            /* inline date under each arrow on mobile */
            .date-inline { display:block; }

            @media (max-width: 1399px) {
                .step-menu li {
                    flex: 1 1 100%;
                    margin: 0.5rem 0;
                }
            }

            /* Countdown container */
            .countdown{
                --number-color: #635A4A;
                --text-color: #D9CCC1;
                --dot-color: #635A4A;
                --dot-color-remaining: #D9CCC1;
                --dot-color-active: green;
                font-family: system-ui, sans-serif;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 1rem;
                width: min(40rem, 100%);
                margin-inline: auto;
                container: inline-size;
                > .part {
                    aspect-ratio: 1/1;
                    display: grid;
                    place-items: center;
                    > .remaining {
                        grid-area: 1/1;
                        color: hsl(0 0% 100%);
                        display: grid;
                        text-align: center;
                        font-size: 3cqi;
                        >.number {
                            color: var(--number-color);
                            line-height: 5rem;
                        }
                        >.text {
                            color: var(--text-color);
                            text-transform: uppercase;
                            font-size: 0.2em;
                            font-weight: bold;
                        }
                    }
                    > .dot-container {
                        grid-area: 1/1;
                        height: 100%;
                        width: 4%;
                        rotate: calc(360deg / var(--dots) * var(--dot-idx));
                        > .dot {
                            width: 100%;
                            aspect-ratio: 1/1;
                            background-color: var(--dot-color);
                            border-radius: 50%;
                            transition: background-color .25s;
                            &[data-active=true]{
                                background-color: var(--dot-color-remaining);
                                &[data-lastactive=true]{
                                    background-color: var(--dot-color-active);
                                }
                            }
                        }
                    }
                }
            }

            /* Timeline base */
            .timeline {
                position: relative;
                padding: 1rem 0;
            }
            .timeline::before {
                content: '';
                position: absolute;
                top: 0; bottom: 0; left: 50%;
                width: 2px; background: #e9ecef;
                transform: translateX(-50%);
            }

            .timeline-item {
                position: relative;
                display: flex;
                margin: 1rem 0;
            }
            .timeline-badge {
                position: absolute;
                left: 50%; transform: translate(-50%, 0);
                z-index: 2;
                background: #fff; border: 2px solid #dee2e6; color: #6c757d;
                width: 38px; height: 38px; border-radius: 50%;
                display: grid; place-items: center;
            }
            .timeline-panel {
                width: 46%;
                background: #fff;
                border: 1px solid #e9ecef;
                border-radius: 0;
                padding: .75rem .9rem;
                box-shadow: 0 2px 6px rgba(16,24,40,.04);
            }

            /* Left/right alternation on xl+ */
            @media (min-width: 1200px) {
                .timeline-item:nth-child(odd)  .timeline-panel { margin-right: auto; }
                .timeline-item:nth-child(even) .timeline-panel { margin-left:  auto; }
            }

            /* Pinned accent */
            .timeline-item.pinned .timeline-badge {
                border-color: #f7e7a7;
                background: #fff8dc;
                color: #856404;
            }

            /* Mobile: single column, line on the left */
            @media (max-width: 1199.98px) {
                .timeline::before { left: 20px; transform: none; }
                .timeline-badge { left: 20px; transform: none; }
                .timeline-panel { width: 100%; margin-left: 56px; }
            }
            /* base */
            .timeline-panel {
                border-left: 3px solid transparent;
                background: #fff;
            }

            /* incoming (council -> you) */
            .timeline-panel.type-incoming {
                border-left-color: var(--bs-primary);
                background-image: linear-gradient(to right, rgba(13,110,253,.06), rgba(13,110,253,0));
            }

            /* outgoing (you -> council) */
            .timeline-panel.type-outgoing {
                border-left-color: var(--bs-success);
                background-image: linear-gradient(to right, rgba(25,135,84,.07), rgba(25,135,84,0));
            }

            /* notes */
            .timeline-panel.type-note {
                border-left-color: var(--bs-warning);
                background-image: linear-gradient(to right, rgba(255,193,7,.10), rgba(255,193,7,0));
            }

            /* optional: tint the badge ring to match (if you added type-* to .timeline-item too) */
            .timeline-item.type-incoming .timeline-badge { border-color: rgba(13,110,253,.35); }
            .timeline-item.type-outgoing .timeline-badge { border-color: rgba(25,135,84,.35); }
            .timeline-item.type-note     .timeline-badge { border-color: rgba(255,193,7,.45); }