:root {
    --ink: #152526;
    --muted: #657475;
    --paper: #f4f5f1;
    --surface: #ffffff;
    --line: #dfe4df;
    --brand: #116466;
    --brand-dark: #0b4546;
    --accent: #e7a12f;
    --danger: #b63d3d;
    --warning: #b86f13;
    --success: #2d7550;
    --shadow: 0 12px 35px rgba(20, 44, 45, .08);
}

* { box-sizing: border-box; }

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.6rem;
}

a { color: var(--brand); }
a:hover, a:focus { color: var(--brand-dark); }
h1, h2, h3 { color: var(--ink); letter-spacing: -.025em; }
h1 { margin: .5rem 0 1rem; font-size: clamp(3rem, 5vw, 4.6rem); line-height: 1.05; }
h2 { font-size: 2.2rem; }
p { color: #415152; }

.site-header { background: #102f30; color: #fff; }
.top-nav {
    max-width: 128rem;
    min-height: 7.4rem;
    margin: 0 auto;
    padding: 1.2rem 2.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.brand { display: flex; align-items: center; gap: 1.2rem; color: #fff; font-size: 2rem; font-weight: 700; text-decoration: none; }
.brand:hover { color: #fff; }
.brand small { display: block; color: #a9c4c4; font-size: 1.1rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.brand-mark { display: grid; width: 4.2rem; height: 4.2rem; place-items: center; border: 1px solid #5b9192; border-radius: 1.2rem; color: #f1b653; }
.top-nav-links { display: flex; align-items: center; gap: 1.8rem; }
.top-nav-links a { color: #e8f0ef; font-size: 1.4rem; text-decoration: none; }
.top-nav-links a:hover { color: #fff; }
.identity { padding-left: 1.8rem; border-left: 1px solid #477071; color: #adc8c8; font-size: 1.3rem; }

.main { min-height: calc(100vh - 13rem); }
.portal-container { max-width: 128rem; margin: 0 auto; padding: 4.5rem 2.4rem 7rem; }
.site-footer { padding: 2rem; color: #778383; font-size: 1.2rem; text-align: center; }
.eyebrow { color: var(--brand); font-size: 1.2rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 3rem; }
.page-heading > div:first-child { max-width: 82rem; }
.page-heading p { max-width: 72rem; margin: 0; font-size: 1.7rem; }
.page-heading.compact { align-items: center; }
.back-link { margin-bottom: 2.5rem; font-size: 1.4rem; }

.sync-state { min-width: 24rem; padding: 1.4rem 1.7rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,255,255,.65); color: var(--muted); font-size: 1.2rem; }
.status-dot { display: inline-block; width: .8rem; height: .8rem; margin-right: .7rem; border-radius: 50%; background: var(--warning); }
.sync-state.healthy .status-dot { background: var(--success); box-shadow: 0 0 0 .4rem rgba(45,117,80,.12); }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-bottom: 2.2rem; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: 1.2rem; background: var(--surface); box-shadow: var(--shadow); }
.metric-card { padding: 2rem 2.2rem; }
.metric-card span { display: block; color: var(--muted); font-size: 1.3rem; }
.metric-card strong { display: block; margin-top: .3rem; color: var(--ink); font-size: 3.3rem; }
.panel { margin-bottom: 2rem; padding: 2.4rem; }

.filter-form { display: grid; grid-template-columns: minmax(22rem, 2fr) minmax(16rem, 1fr) minmax(16rem, 1fr) auto; align-items: end; gap: 1.4rem; margin: 0; }
.compact-filter .filter-form { grid-template-columns: minmax(20rem, 32rem) auto; }
.filter-form .input { margin: 0; }
.filter-actions, .form-actions, .badge-row { display: flex; align-items: center; gap: 1rem; }
label { color: #364647; font-size: 1.3rem; }
input, select, textarea { border-color: #cdd6d1 !important; background: #fff !important; }
input:focus, select:focus, textarea:focus { border-color: var(--brand) !important; }
.button, button, input[type="submit"] { margin: 0; border-color: var(--brand); background: var(--brand); }
.button:hover, button:hover, input[type="submit"]:hover { border-color: var(--brand-dark); background: var(--brand-dark); }
.button.button-outline { border-color: #99aaa5; background: transparent; color: #536461; }
.button-wide { width: 100%; }

.table-responsive { width: 100%; overflow-x: auto; }
table { margin: 0; }
th { color: var(--muted); font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
td { border-bottom-color: #e9ece8; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.table-subtitle { display: block; margin-top: .4rem; color: var(--muted); font-size: 1.15rem; }
.row-link { font-weight: 700; text-decoration: none; }

.badge { display: inline-flex; align-items: center; padding: .35rem .75rem; border-radius: 2rem; font-size: 1.05rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.badge-major { background: #f8dddd; color: #8f2929; }
.badge-moderate { background: #fff0d8; color: #92570d; }
.badge-minor { background: #e5efea; color: #426557; }
.badge-draft { background: #dcebec; color: #14595b; text-decoration: none; }
.badge-neutral { background: #e9ece9; color: #52605d; }
.muted { color: var(--muted); }
.empty-state { padding: 4rem !important; color: var(--muted); text-align: center; }

.paginator { padding-top: 2rem; text-align: center; }
.paginator p { margin: 0; color: var(--muted); font-size: 1.2rem; }
.pagination { display: flex; justify-content: center; gap: .4rem; padding: 0; list-style: none; }
.pagination li a { display: block; min-width: 3.3rem; padding: .5rem .8rem; border-radius: .7rem; text-decoration: none; }
.pagination .active a { background: var(--brand); color: #fff; }
.pagination .disabled { opacity: .35; }

.detail-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(27rem, 1fr); gap: 2rem; }
.detail-main, .detail-aside { margin: 0; }
.lead-copy { font-size: 1.8rem; line-height: 1.7; }
.detail-list { margin: 2.5rem 0 0; }
.detail-list > div { display: grid; grid-template-columns: 16rem 1fr; padding: 1.2rem 0; border-top: 1px solid #edf0ed; }
.detail-list dt { color: var(--muted); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; }
.detail-list dd { margin: 0; }
.detail-aside code { overflow-wrap: anywhere; font-size: 1.1rem; }
.detail-aside hr { margin: 2.3rem 0; border-color: var(--line); }
.restriction-list { margin-top: 2rem; }
.restriction-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 2rem; }
.restriction-heading h2 { margin: .5rem 0 0; }
.restriction-heading p { max-width: 58rem; margin: 0; }
.restriction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.restriction-card { padding: 1.8rem; border: 1px solid var(--line); border-radius: 1rem; background: #fafbf8; }
.restriction-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.restriction-number { color: var(--muted); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; }
.restriction-card h3 { margin: 1.2rem 0 .7rem; font-size: 1.8rem; }
.restriction-card > p { margin: 0 0 1.3rem; font-size: 1.35rem; }
.restriction-details { margin: 1.4rem 0 0; }
.restriction-details > div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid #e6ebe6; }
.restriction-details dt { color: var(--muted); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; }
.restriction-details dd { margin: 0; font-size: 1.3rem; }
.post-preview { margin: 1.8rem 0 3rem; padding: 2.2rem; border-left: .4rem solid var(--accent); border-radius: .6rem; background: #f8f9f6; font-size: 1.65rem; line-height: 1.65; }
.public-links { padding-left: 2rem; }

.draft-list { display: grid; gap: 1.5rem; }
.draft-card { display: flex; align-items: center; justify-content: space-between; gap: 3rem; margin: 0; }
.draft-card h2 { margin: 1rem 0 .6rem; }
.draft-card p { max-width: 80rem; margin-bottom: .6rem; }
.draft-card-actions { display: grid; min-width: 16rem; gap: .8rem; justify-items: end; }
.draft-card-actions small { color: var(--muted); }
.edit-panel { max-width: 90rem; }
.edit-panel textarea { min-height: 30rem; line-height: 1.55; }

.login-shell { display: grid; min-height: calc(100vh - 23rem); place-items: center; }
.login-card { width: min(46rem, 100%); padding: 4rem; border: 1px solid var(--line); border-radius: 1.4rem; background: var(--surface); box-shadow: var(--shadow); }
.login-card h1 { font-size: 3.4rem; }
.login-card p { margin-bottom: 2.5rem; }
.message { margin-bottom: 2rem; padding: 1.2rem 1.5rem; border: 1px solid #bfd4ca; border-radius: .8rem; background: #e9f4ef; color: #275c44; }
.message.error { border-color: #e5bebe; background: #f9e5e5; color: #8d2929; }
.message.warning { border-color: #ebd1a9; background: #fff3df; color: #895817; }

.feeds-heading { align-items: center; }
.feed-refresh-action { display: grid; min-width: 29rem; gap: .7rem; justify-items: end; }
.feed-refresh-action form { margin: 0; }
.feed-refresh-action small { max-width: 34rem; color: var(--muted); text-align: right; }
.feed-refresh-action button[disabled] { border-color: #aeb8b3; background: #aeb8b3; cursor: not-allowed; opacity: .8; }
.feed-section { margin-top: 3.5rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 1.5rem; }
.section-heading h2 { margin: .4rem 0 0; font-size: 2.7rem; }
.section-heading p { max-width: 58rem; margin: 0; text-align: right; }
.feed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.feed-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feed-grid-single-secondary { grid-template-columns: 1fr; margin-top: 1.6rem; }
.feed-card { display: flex; flex-direction: column; min-height: 31rem; margin: 0; }
.feed-card-compact { min-height: 23rem; }
.feed-card-vms { min-height: 0; }
.feed-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.feed-card h3 { margin: .5rem 0 0; font-size: 2rem; }
.feed-type { color: var(--muted); font-size: 1.05rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.badge-feed-succeeded { background: #dceee4; color: #246643; }
.badge-feed-running { background: #dcebec; color: #14595b; }
.badge-feed-failed { background: #f8dddd; color: #8f2929; }
.badge-feed-unknown { background: #e9ece9; color: #52605d; }
.feed-status-list { margin: 2rem 0; }
.feed-status-list > div { padding: 1rem 0; border-top: 1px solid #edf0ed; }
.feed-status-list dt { color: var(--muted); font-size: 1.05rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.feed-status-list dd { margin: .25rem 0 0; font-size: 1.35rem; }
.feed-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: auto; }
.feed-metrics > div { padding: 1rem; border-radius: .8rem; background: #f4f6f2; }
.feed-metrics span { display: block; color: var(--muted); font-size: 1rem; text-transform: uppercase; }
.feed-metrics strong { display: block; margin-top: .2rem; font-size: 2rem; }
.feed-alert, .feed-note { margin: 1.4rem 0 0; padding: 1rem; border-radius: .7rem; font-size: 1.2rem; }
.feed-alert { background: #f9e5e5; color: #8d2929; }
.feed-note { background: #e5f1f1; color: #14595b; }

.road-signs-heading { align-items: center; }
.road-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(28rem, 40rem); align-items: end; gap: 4rem; }
.road-picker h2 { margin: .4rem 0 .5rem; }
.road-picker p { max-width: 70rem; margin: 0; }
.road-picker-form { margin: 0; }
.road-picker-form select { margin: 0; }
.road-picture { margin-top: 4rem; }
.road-picture-heading { margin-bottom: 2.5rem; }
.road-picture-heading h2 { font-size: 3rem; }

.road-corridor {
    position: relative;
    width: min(112rem, 100%);
    margin: 0 auto 2.5rem;
    padding: 8rem 0;
}
.road-spine {
    position: absolute;
    z-index: 0;
    top: 3.8rem;
    bottom: 3.8rem;
    left: 50%;
    width: 1.8rem;
    border: .3rem solid #d7d9d4;
    border-top: 0;
    border-bottom: 0;
    border-radius: .7rem;
    background: #4d5654;
    box-shadow: inset .2rem 0 rgba(255,255,255,.1), inset -.2rem 0 rgba(0,0,0,.12);
    transform: translateX(-50%);
}
.road-spine::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: .2rem dashed rgba(255,255,255,.75);
    content: '';
    transform: translateX(-50%);
}
.road-endpoint {
    position: absolute;
    z-index: 2;
    left: 50%;
    width: 8rem;
    padding: .7rem 1rem;
    border: .3rem solid #f4f5f1;
    border-radius: 3rem;
    background: var(--brand-dark);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
}
.road-endpoint-top { top: 0; }
.road-endpoint-bottom { bottom: 0; }
.road-sign-stop {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 1fr);
    align-items: center;
    margin: 0 0 2.4rem;
}
.road-sign-stop:last-of-type { margin-bottom: 0; }
.road-sign-marker {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 1.7rem;
    height: 1.7rem;
    border: .3rem solid var(--paper);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 .2rem #75531e;
}
.road-sign-stop::before {
    position: absolute;
    top: 50%;
    width: 3.6rem;
    border-top: .2rem solid #a8afaa;
    content: '';
}
.road-sign-left::before { right: 50%; }
.road-sign-right::before { left: 50%; }
.road-junction-stop {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 1fr);
    align-items: center;
    margin: 1.2rem 0 2.4rem;
}
.road-junction-marker {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 2.4rem;
    height: 2.4rem;
    border: .3rem solid var(--paper);
    border-radius: 50%;
    background: #f8faf7;
    box-shadow: 0 0 0 .2rem #59706d;
}
.road-junction-marker::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--brand);
    content: '';
    transform: translate(-50%, -50%);
}
.road-junction-stop::before {
    position: absolute;
    top: 50%;
    width: 3.6rem;
    border-top: .2rem solid #a8afaa;
    content: '';
}
.road-junction-left::before { right: 50%; }
.road-junction-right::before { left: 50%; }
.road-junction-callout {
    display: flex;
    grid-row: 1;
    width: max-content;
    max-width: min(26rem, 100%);
    align-items: center;
    gap: .9rem;
    padding: .6rem .9rem;
    border: .25rem solid #fff;
    border-radius: .55rem;
    outline: .15rem solid #adc3bd;
    background: #176768;
    color: #fff;
    box-shadow: 0 .5rem 1.3rem rgba(20,44,45,.12);
    text-decoration: none;
}
.road-junction-callout:hover { background: var(--brand-dark); color: #fff; }
.road-junction-callout strong { font-size: 1.45rem; letter-spacing: .04em; white-space: nowrap; }
.road-junction-callout span { font-size: .9rem; line-height: 1.25; opacity: .88; }
.road-junction-left .road-junction-callout { grid-column: 1; justify-self: end; }
.road-junction-right .road-junction-callout { grid-column: 3; justify-self: start; }
.vms-sign {
    width: min(48rem, 100%);
    overflow: hidden;
    border: 1px solid #cfd5d0;
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 1.2rem 3rem rgba(20,44,45,.1);
}
.road-sign-left .vms-sign { grid-column: 1; grid-row: 1; justify-self: end; }
.road-sign-right .vms-sign { grid-column: 3; grid-row: 1; justify-self: start; }
.vms-sign-topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.2rem;
    background: #e8ece7;
    color: #4f5d5a;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.vms-sign-warning .vms-sign-topline { background: #f5e4c7; color: #794f10; }
.vms-board {
    position: relative;
    min-height: 10.5rem;
    margin: 1.2rem;
    padding: 1.7rem 1.5rem;
    border: .45rem solid #252b2b;
    border-radius: .5rem;
    background-color: #080b0b;
    background-image: radial-gradient(rgba(255,255,255,.045) .08rem, transparent .09rem);
    background-size: .45rem .45rem;
    box-shadow: inset 0 0 2rem rgba(0,0,0,.9), 0 .3rem .7rem rgba(0,0,0,.2);
    color: #ffa323;
    font-family: "Courier New", ui-monospace, monospace;
    text-align: center;
    text-shadow: 0 0 .5rem rgba(255,159,36,.75);
}
.vms-board-content { display: flex; min-height: 6.2rem; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; }
.vms-board-with-pictogram { min-height: 17rem; }
.vms-pictograms { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; }
.vms-pictogram { width: clamp(8rem, 10vw, 10rem); margin: 0; }
.vms-pictogram img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 .35rem rgba(255,59,48,.24)) drop-shadow(0 0 .4rem rgba(255,159,36,.25)); }
.vms-board-copy { width: 100%; }
.vms-line { display: block; font-size: clamp(1.65rem, 2.2vw, 2.25rem); font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.vms-page-number { position: absolute; top: .4rem; right: .6rem; color: #8c7545; font-size: .8rem; letter-spacing: .04em; text-shadow: none; text-transform: uppercase; }
.vms-sign-meta, .vms-sign-footer { display: flex; justify-content: space-between; gap: 1.2rem; padding: 0 1.3rem 1rem; color: var(--muted); font-size: 1.05rem; }
.vms-sign-footer { padding-top: .9rem; border-top: 1px solid #edf0ed; color: #405251; }
.vms-sign-footer a { white-space: nowrap; }
.road-calm-state h3 { margin: 1rem 0 .5rem; }
.road-calm-state p { max-width: 65rem; margin: 0 auto; }
.road-calm-note { margin-bottom: 2rem; }
.calm-icon { display: inline-grid; width: 4.4rem; height: 4.4rem; place-items: center; border-radius: 50%; background: #dceee4; color: var(--success); font-size: 2.4rem; font-weight: 800; }
.vms-caveat { border-left: .4rem solid var(--accent); color: #53615f; font-size: 1.25rem; line-height: 1.6; }
.vms-caveat strong { color: var(--ink); }

@media (max-width: 900px) {
    .top-nav, .page-heading, .draft-card, .restriction-heading, .section-heading { align-items: flex-start; flex-direction: column; }
    .top-nav-links { width: 100%; flex-wrap: wrap; }
    .identity { margin-left: auto; }
    .metric-grid { grid-template-columns: 1fr; }
    .filter-form, .compact-filter .filter-form { grid-template-columns: 1fr 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .restriction-grid { grid-template-columns: 1fr; }
    .feed-grid, .feed-grid-three { grid-template-columns: 1fr; }
    .section-heading p { text-align: left; }
    .feed-refresh-action { justify-items: start; }
    .feed-refresh-action small { text-align: left; }
    .draft-card-actions { justify-items: start; }
    .road-picker { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 760px) {
    .road-corridor { padding: 7rem 0 7rem 3rem; }
    .road-spine { left: 1.5rem; }
    .road-endpoint { left: 1.5rem; }
    .road-sign-stop { grid-template-columns: 4rem minmax(0, 1fr); margin-bottom: 2rem; }
    .road-sign-marker { grid-column: 1; }
    .road-sign-left .vms-sign, .road-sign-right .vms-sign { grid-column: 2; justify-self: stretch; }
    .road-sign-left::before, .road-sign-right::before { right: auto; left: 1.5rem; width: 3.4rem; }
    .road-junction-stop { grid-template-columns: 4rem minmax(0, 1fr); margin-bottom: 1.8rem; }
    .road-junction-marker { grid-column: 1; }
    .road-junction-left .road-junction-callout,
    .road-junction-right .road-junction-callout { grid-column: 2; justify-self: start; }
    .road-junction-left::before,
    .road-junction-right::before { right: auto; left: 1.5rem; width: 3.4rem; }
}

@media (max-width: 560px) {
    .portal-container { padding: 3rem 1.5rem 5rem; }
    .top-nav-links { gap: 1rem; }
    .identity { width: 100%; margin: .5rem 0 0; padding: 1rem 0 0; border-top: 1px solid #477071; border-left: 0; }
    .filter-form, .compact-filter .filter-form { grid-template-columns: 1fr; }
    .filter-actions { flex-wrap: wrap; }
    .detail-list > div { grid-template-columns: 1fr; gap: .3rem; }
    .restriction-details > div { grid-template-columns: 1fr; gap: .2rem; }
    .login-card { padding: 2.5rem; }
    .vms-sign-meta, .vms-sign-footer { flex-direction: column; gap: .35rem; }
}