.tos-service-stack {
    margin: 28px 0;
}

.tos-service-stack > *:first-child {
    margin-top: 0;
}

.tos-service-stack > *:last-child {
    margin-bottom: 0;
}

/* Live */
.tripoutside-live,
.tos-cameras {
    box-sizing: border-box;
    margin: 24px 0;
    padding: 22px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 8px 28px rgba(15,23,42,.06);
    font-family: inherit;
}

.tripoutside-live *,
.tripoutside-live *::before,
.tripoutside-live *::after,
.tos-cameras *,
.tos-cameras *::before,
.tos-cameras *::after {
    box-sizing: border-box;
}

.tripoutside-live__head,
.tos-cameras__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.tripoutside-live__eyebrow,
.tos-cameras__eyebrow {
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tripoutside-live__title,
.tos-cameras__title {
    margin: 0 !important;
    font-size: clamp(20px,2vw,28px) !important;
    line-height: 1.15 !important;
}

.tripoutside-live__condition-icon {
    font-size: 38px;
    line-height: 1;
}

.tripoutside-live__main {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.tripoutside-live__temp {
    font-size: clamp(42px,7vw,64px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
}

.tripoutside-live__condition {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tripoutside-live__condition strong {
    font-size: 16px;
}

.tripoutside-live__condition span {
    color: #6b7280;
    font-size: 14px;
}

.tripoutside-live__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
    gap: 10px;
}

.tripoutside-live__item {
    min-width: 0;
    padding: 13px 14px;
    border-radius: 12px;
    background: #f8fafc;
}

.tripoutside-live__item-label {
    display: block;
    margin-bottom: 2px;
    color: #6b7280;
    font-size: 12px;
}

.tripoutside-live__item strong {
    font-size: 15px;
}

.tripoutside-live__source {
    margin-top: 14px;
    color: #9ca3af;
    font-size: 11px;
    line-height: 1.4;
}

.tripoutside-live--error,
.tos-camera-error {
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 14px;
    background: #fef2f2;
    color: #991b1b;
}

/* Cameras */
.tos-cameras__count {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
}

.tos-cameras__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.tos-cameras__grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.tos-camera {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.tos-camera__ratio {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111827;
}

.tos-camera__ratio iframe,
.tos-camera__ratio img,
.tos-camera__ratio video,
.tos-camera__ratio--oembed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.tos-camera__ratio--oembed > * {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
}

.tos-camera__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 24px;
    background: #f3f4f6;
    color: #6b7280;
    text-align: center;
    font-size: 14px;
}

.tos-camera__body {
    padding: 14px;
}

.tos-camera__topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.tos-camera__name {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
}

.tos-camera__status {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.tos-camera__status--online {
    background: #ecfdf5;
    color: #047857;
}

.tos-camera__status--unknown {
    background: #f3f4f6;
    color: #6b7280;
}

.tos-camera__status--offline {
    background: #fef2f2;
    color: #b91c1c;
}

.tos-camera__status--external {
    background: #eff6ff;
    color: #1d4ed8;
}

.tos-camera__placeholder--external {
    background: #f8fafc;
    color: #475569;
}

.tos-camera__placeholder--external > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 320px;
}

.tos-camera__placeholder--external strong {
    color: #1f2937;
    font-size: 15px;
}

.tos-camera__placeholder--external span {
    display: block;
    line-height: 1.45;
}

.tos-camera__external-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 9px 14px;
    border-radius: 10px;
    background: #0f766e;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
}

.tos-camera__external-button:hover,
.tos-camera__external-button:focus {
    background: #115e59;
    color: #fff !important;
}

.tos-camera__caption {
    margin: 9px 0 0 !important;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

.tos-camera__source {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.tos-cameras__more {
    margin-top: 16px;
    text-align: right;
}

.tos-cameras__more a {
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 700px) {
    .tos-cameras__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .tripoutside-live,
    .tos-cameras {
        padding: 17px;
        border-radius: 15px;
    }

    .tripoutside-live__main {
        align-items: flex-end;
    }

    .tripoutside-live__grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .tos-cameras__head {
        align-items: center;
    }
}


/* Status */
.tos-status-board {
    box-sizing: border-box;
    margin: 24px 0;
    padding: 22px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 8px 28px rgba(15,23,42,.06);
    font-family: inherit;
}

.tos-status-board *,
.tos-status-board *::before,
.tos-status-board *::after {
    box-sizing: border-box;
}

.tos-status-board__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.tos-status-board__eyebrow {
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tos-status-board__title {
    margin: 0 !important;
    font-size: clamp(20px,2vw,28px) !important;
    line-height: 1.15 !important;
}

.tos-status-board__list {
    display: grid;
    gap: 12px;
}

.tos-status-card {
    border: 1px solid #e5e7eb;
    border-left-width: 5px;
    border-radius: 14px;
    padding: 15px 16px;
    background: #fff;
}

.tos-status-card--open {
    border-left-color: #10b981;
}

.tos-status-card--restricted {
    border-left-color: #f59e0b;
}

.tos-status-card--closed {
    border-left-color: #ef4444;
}

.tos-status-card--warning {
    border-left-color: #f97316;
}

.tos-status-card--unknown {
    border-left-color: #9ca3af;
}

.tos-status-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tos-status-card__kind {
    margin-bottom: 3px;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tos-status-card__name {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
}

.tos-status-card__badge {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.tos-status-card__badge--open {
    background: #ecfdf5;
    color: #047857;
}

.tos-status-card__badge--restricted {
    background: #fffbeb;
    color: #b45309;
}

.tos-status-card__badge--closed {
    background: #fef2f2;
    color: #b91c1c;
}

.tos-status-card__badge--warning {
    background: #fff7ed;
    color: #c2410c;
}

.tos-status-card__badge--unknown {
    background: #f3f4f6;
    color: #6b7280;
}

.tos-status-card__summary {
    margin: 10px 0 0 !important;
    font-size: 14px;
    line-height: 1.55;
}

.tos-status-card__details {
    margin: 10px 0 0 !important;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.55;
}

.tos-status-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}

.tos-status-card__meta span {
    padding: 5px 8px;
    border-radius: 8px;
    background: #f8fafc;
    color: #4b5563;
    font-size: 11px;
}

.tos-status-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #f1f5f9;
    font-size: 11px;
}

.tos-status-card__checked {
    color: #6b7280;
}

.tos-status-card__checked--stale {
    color: #b45309;
    font-weight: 700;
}

.tos-status-card__source,
.tos-status-card__source-text {
    font-weight: 700;
    text-decoration: none;
}

.tos-status-board__more {
    margin-top: 16px;
    text-align: right;
}

.tos-status-board__more a {
    font-weight: 700;
    text-decoration: none;
}

.tos-status-board--compact .tos-status-card {
    padding: 13px 14px;
}

.tos-status-error {
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 14px;
    background: #fef2f2;
    color: #991b1b;
}

@media (max-width: 520px) {
    .tos-status-board {
        padding: 17px;
        border-radius: 15px;
    }

    .tos-status-card__top {
        gap: 8px;
    }

    .tos-status-card__badge {
        font-size: 9px;
    }

    .tos-status-card__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* Service directory */
.tos-directory {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 30px;
}

.tos-directory__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px 48px 18px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    color: #1f2937;
    text-decoration: none !important;
    box-shadow: 0 5px 18px rgba(15,23,42,.04);
    transition: transform .15s ease, box-shadow .15s ease;
}

.tos-directory__card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(15,23,42,.08);
}

.tos-directory__title {
    font-size: 17px;
    font-weight: 750;
    line-height: 1.3;
}

.tos-directory__meta {
    margin-top: 5px;
    color: #6b7280;
    font-size: 12px;
}

.tos-directory__arrow {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 700;
}

@media (max-width: 650px) {
    .tos-directory {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Regional service catalogue groups */
.tos-directory-groups {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 22px 0 30px;
}

.tos-directory-group {
    margin: 0;
}

.tos-directory-group__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
}

.tos-directory-group__title {
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
}

.tos-directory-group__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
}

.tos-directory-group .tos-directory {
    margin: 0;
}


.tos-status-card__source-health {
    margin-top: 4px;
    color: #b45309;
    font-size: 11px;
    line-height: 1.35;
}

.tos-camera__status--source-error {
    background: #fff7ed;
    color: #c2410c;
}

.tos-camera__placeholder--source-error {
    background: #fffaf0;
    color: #9a3412;
}

.tos-camera__health-note {
    margin: 8px 0 0 !important;
    color: #9ca3af;
    font-size: 11px;
    line-height: 1.45;
}


/* Camera landing: Atlas-like lower SEO card. */
.tos-camera-bottom-text {
    margin-top: 32px;
    padding: 40px;
    background: #f7f9fb;
    border: 1px solid #dde5ec;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
    color: #172033;
}

.tos-camera-bottom-text > :first-child {
    margin-top: 0 !important;
}

.tos-camera-bottom-text > :last-child {
    margin-bottom: 0 !important;
}

.tos-camera-bottom-text h2 {
    margin: 34px 0 18px;
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.tos-camera-bottom-text h3 {
    margin: 28px 0 14px;
    font-size: 22px;
    line-height: 1.3;
}

.tos-camera-bottom-text p,
.tos-camera-bottom-text li {
    font-size: 16px;
    line-height: 1.75;
}

.tos-camera-bottom-text p {
    margin: 0 0 18px;
}

.tos-camera-bottom-text ul,
.tos-camera-bottom-text ol {
    margin: 0 0 20px 1.25em;
}


/* FAQ inside the lower camera SEO card. The renderer also normalizes FAQ
   text pasted into the WYSIWYG as one compact paragraph. */
.tos-camera-bottom-text .tos-camera-faq {
    display: grid;
    gap: 12px;
    margin: 4px 0 0;
}

.tos-camera-bottom-text .tos-camera-faq__item {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #dde5ec;
    border-radius: 14px;
}

.tos-camera-bottom-text .tos-camera-faq__question {
    margin: 0 0 7px;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}

.tos-camera-bottom-text .tos-camera-faq__answer {
    color: #374151;
    font-size: 15px;
    line-height: 1.7;
}

/* Camera service pages do not need an automatically generated table of contents. */
body.tos-camera-landing-page #ez-toc-container,
body.tos-camera-landing-page .ez-toc-container,
body.tos-camera-landing-page #toc_container,
body.tos-camera-landing-page .toc_container,
body.tos-camera-landing-page .lwptoc,
body.tos-camera-landing-page .rank-math-toc-block {
    display: none !important;
}

@media (max-width: 767px) {
    .tos-camera-bottom-text {
        margin-top: 24px;
        padding: 24px 20px;
        border-radius: 16px;
    }

    .tos-camera-bottom-text h2 {
        margin-top: 28px;
        font-size: 26px;
    }

    .tos-camera-bottom-bottom-text h3,
    .tos-camera-bottom-text h3 {
        margin-top: 24px;
        font-size: 20px;
    }

    .tos-camera-bottom-text .tos-camera-faq__item {
        padding: 16px;
        border-radius: 12px;
    }

}