.jmo-ns-wrapper {

            width: 100%;

            margin: 0 auto;

            color: #30343b;
            container-type: inline-size;
            container-name: jmo-nearby-stations;

        }


		.jmo-ns-header {

			padding: 7px 15px;

			border-radius: 13px 13px 0 0;

			font-weight: 700;

			font-size: 15px;

		}


		.jmo-ns-selector {

			display: flex;

			justify-content: flex-end;

			margin: 12px 0;

			padding-right: 15px;

			box-sizing: border-box;

		}


        .jmo-ns-selector select {

            max-width: 100%;

            min-width: 170px;

            padding: 7px 10px;

            border: 1px solid #d5dbe2;

            border-radius: 8px;

            background: #ffffff;

            color: #30343b;

        }


        .jmo-ns-list {

            display: grid;

            grid-template-columns: 1fr;

            gap: 12px;

        }


        .jmo-ns-card {

            background: #ffffff;

            border: 1px solid #e0e5eb;

            border-radius: 12px;

            overflow: hidden;

            box-shadow: 0 2px 5px rgba(0,0,0,.07);

        }


        .jmo-ns-card-header {

            padding: 12px 15px 5px;

            text-align: center;

        }


        .jmo-ns-station-name {

            font-size: 18px;

            font-weight: 700;

            color: #30343b;

        }


		.jmo-ns-place {
			display: inline !important;
			font-size: 13px;
			font-weight: 400;
			color: #777f89;
			margin-left: 4px;
			white-space: nowrap;
		}


        .jmo-ns-metrics {

            display: grid;

            grid-template-columns: repeat(3, minmax(0, 1fr));

            gap: 10px;

            padding: 12px 15px;

        }


        .jmo-ns-metric {

            background: #f3f6fa;

            border-radius: 9px;

            text-align: center;

            padding: 12px 4px;

            min-width: 0;

        }


        .jmo-ns-metric-label {

            font-size: 11px;

            color: #737e8b;

            font-weight: 600;

            text-transform: uppercase;

            letter-spacing: .3px;

        }


        .jmo-ns-metric-value {

            font-size: 25px;

            font-weight: 700;

            line-height: 1.5;

            color: #263849;

            white-space: nowrap;

        }


        .jmo-ns-metric-unit {

            font-size: 11px;

            color: #8a929c;

        }


        .jmo-ns-footer {

            border-top: 1px solid #edf0f3;

            padding: 9px 15px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            gap: 8px;

            font-size: 11px;

            color: #7a838e;

        }


        .jmo-ns-footer a {

            color: #2875cf;

            text-decoration: none;

            font-weight: 600;

        }


        .jmo-ns-footer a:hover {

            text-decoration: underline;

        }

        .jmo-ns-attribution {

            margin-top: 8px;
            padding: 0 2px;
            font-size: 11px;
            line-height: 1.4;
            color: #7a838e;

        }

        .jmo-ns-attribution a {

            color: inherit;
            text-decoration: none;

        }

        .jmo-ns-attribution a:hover {

            text-decoration: underline;

        }


        .jmo-ns-status {

            font-size: 11px;

            color: #23834a;

            margin-top: 3px;

        }


        .jmo-ns-status.stale {

            color: #bb7900;

        }


        .jmo-ns-error {

            padding: 15px;

            color: #777f89;

            font-size: 13px;

            text-align: center;

        }


        /* Mobile adjustments */

        @media (max-width: 480px) {

            .jmo-ns-metrics {

                gap: 5px;

                padding: 10px 8px;

            }


            .jmo-ns-metric {

                padding: 10px 2px;

            }


            .jmo-ns-metric-value {

                font-size: 21px;

            }


            .jmo-ns-metric-label {

                font-size: 10px;

            }

        }

        /* Adapt the cards to the width of the shortcode block, not the screen. */
        @container jmo-nearby-stations (max-width: 520px) {
            .jmo-ns-metrics {
                gap: 6px;
                padding: 10px 8px;
            }
            .jmo-ns-metric {
                padding: 10px 3px;
            }
            .jmo-ns-metric-label {
                font-size: 10px;
                letter-spacing: 0;
                overflow-wrap: anywhere;
            }
            .jmo-ns-metric-value {
                font-size: clamp(16px, 5cqi, 22px);
                white-space: normal;
                overflow-wrap: anywhere;
            }
            .jmo-ns-station-name {
                overflow-wrap: anywhere;
            }
            .jmo-ns-place {
                white-space: normal;
            }
            .jmo-ns-footer {
                flex-wrap: wrap;
            }
        }

        @container jmo-nearby-stations (max-width: 340px) {
            .jmo-ns-metrics {
                grid-template-columns: minmax(0, 1fr);
                gap: 7px;
                padding: 10px 12px;
            }
            .jmo-ns-metric {
                padding: 9px 8px;
            }
            .jmo-ns-metric-label {
                font-size: 11px;
            }
            .jmo-ns-metric-value {
                font-size: 22px;
                line-height: 1.3;
            }
            .jmo-ns-selector {
                padding: 0 10px;
            }
            .jmo-ns-selector select {
                width: 100%;
                min-width: 0;
            }
        }