/*
 DistrictView Prototype 5 / T4LA-aligned concept presentation
 Interpretive reference: T4LA 2026 one-pager. These are not official DOTD
 color specifications; no logo, affiliation or endorsement is implied.
 Design goal: energetic public-sector transportation, not dark SaaS styling.
*/
:root{
 --transport-ink:#143d54; --transport-blue:#1d6e90;
 --transport-cyan:#00b6d0; --transport-green:#679c38;
 --transport-orange:#ee6b25; --transport-cloud:#f5f9f9;
 --transport-line:#d8e5e9; --transport-body:#335466;
 --transport-soft:#eaf5f7;
}
html{scroll-behavior:smooth}
body{background:var(--transport-cloud);color:var(--transport-ink)}
h1,h2,h3{color:var(--transport-ink)}
a{transition:color .12s ease}
header{
 min-height:86px;height:auto;position:relative;display:flex;flex-wrap:wrap;
 align-items:center;gap:16px 26px;padding:18px clamp(24px,5vw,90px);
 background:#fff;border-bottom:4px solid var(--transport-cyan);
 box-shadow:0 3px 14px rgba(11,51,73,.06);
}
header:before{
 content:"";position:absolute;bottom:-4px;right:0;width:22%;
 height:4px;background:var(--transport-green);
}
header .brand{font-size:26px;color:var(--transport-ink);white-space:nowrap}
header .brand span{color:var(--transport-blue);font-weight:500}
header .brand i{color:var(--transport-orange)}
header nav{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
header nav a{font-size:13px;font-weight:700;color:var(--transport-ink)}
header nav a:hover{color:var(--transport-blue)}
header .pill{
 background:#f5f8f9;border:1px solid var(--transport-line);
 color:#4e6877;font-size:10px;font-weight:800;letter-spacing:.12em;
}
.dv5-report-link{
 background:var(--transport-blue);color:white;border:1px solid var(--transport-blue);
 border-radius:5px;font-weight:800;padding:10px 13px;box-shadow:0 3px 10px #1d6e901a;
}
.dv5-report-link:hover{background:var(--transport-ink);color:#fff}
.eyebrow,.p4-dashboard .p4-section>.eyebrow{
 color:var(--transport-blue);font-size:11px;font-weight:800;letter-spacing:.15em;
}
button,.btn{background:var(--transport-blue);border-radius:5px}
button:hover,.btn:hover{filter:brightness(.93)}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{
 outline:3px solid var(--transport-cyan);outline-offset:3px;
}
/* Landing: replace dark SaaS billboard with a high-contrast editorial statement. */
.hero{
 background:linear-gradient(122deg,#fff 0%,#fff 58%,#eaf7f9 100%);
 color:var(--transport-ink);padding:clamp(54px,6vw,105px) max(5%,calc((100vw - 1380px)/2));
 gap:clamp(36px,5vw,90px);align-items:center;position:relative;
 border-bottom:1px solid var(--transport-line);
}
.hero:before{
 content:"";position:absolute;top:0;left:0;height:7px;width:45%;
 background:linear-gradient(90deg,var(--transport-cyan) 0% 65%,var(--transport-green) 65% 90%,var(--transport-orange) 90%);
}
.hero .eyebrow{color:var(--transport-blue);letter-spacing:.13em}
.hero h1,.hero h2,.hero h3{color:var(--transport-ink)}
.hero h1{font-size:clamp(40px,5vw,72px);line-height:1.08;max-width:700px;letter-spacing:-.047em}
.hero p{color:var(--transport-body);font-size:clamp(16px,1.35vw,19px);max-width:580px;line-height:1.65}
.hero .btn{background:var(--transport-orange);color:#fff;padding:15px 22px;font-weight:800;box-shadow:0 5px 0 #cb5418}
.hero .btn:hover{background:#d85b19;filter:none}
.dv5-secondary-link{display:inline-flex;margin:18px 0 0 18px;color:var(--transport-blue);font-weight:800;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.dv5-hero-principles{display:flex;flex-wrap:wrap;gap:8px;margin-top:35px}
.dv5-hero-principles span{border-left:3px solid var(--transport-green);padding:4px 12px;font-weight:800;font-size:10px;letter-spacing:.12em;color:#4c6570}
.preview{
 background:white;border:1px solid var(--transport-line);border-radius:14px;
 box-shadow:0 22px 55px rgba(13,73,96,.11);padding:31px 34px;
 align-self:center;position:relative;overflow:hidden;color:var(--transport-ink);
}
.preview:before{content:"";height:6px;position:absolute;left:0;right:0;top:0;background:linear-gradient(90deg,var(--transport-cyan) 0 50%,var(--transport-green) 50% 82%,var(--transport-orange) 82%)}
.preview small{color:var(--transport-blue);font-weight:800;letter-spacing:.08em}
.preview h3,.hero .preview h3{color:var(--transport-ink);font-size:25px;line-height:1.25;margin:20px 0}
.preview .line{color:#244657;border-top:1px solid var(--transport-line);gap:12px;font-size:14px}
.preview b{color:var(--transport-blue);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.section{background:white;padding-top:64px;padding-bottom:70px}
.section h2{font-size:clamp(26px,3vw,40px);max-width:860px;margin-top:12px}
.section .grid .card{border-top:4px solid var(--transport-cyan);box-shadow:0 4px 18px #16445a0a}
.section .grid .card:nth-child(2){border-top-color:var(--transport-green)}
.section .grid .card:nth-child(3){border-top-color:var(--transport-orange)}
.section .num{color:var(--transport-blue);font-size:11px;letter-spacing:.08em}
.section .grid .card h3{margin-top:15px}
.band{background:#eaf4f5;border-left:8px solid var(--transport-green);padding-top:46px;padding-bottom:46px}
.band .btn{background:var(--transport-blue)}
/* Dashboard: make the outcome and its dated basis obvious at first glance. */
.dashboard.p4-dashboard{max-width:1440px;padding-top:34px}
.p4-dashboard .notice{
 background:#eaf6f1;border-left:4px solid var(--transport-green);
 color:#244e44;border-radius:5px;line-height:1.5;padding:13px 16px;
}
.p4-dashboard .topline h1{font-size:clamp(36px,3.5vw,53px);letter-spacing:-.035em;margin:5px 0}
.p4-dashboard .topline .muted{color:#58717f}
.p4-dashboard .report-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.p4-dashboard .report-controls button,#print{background:var(--transport-blue);color:#fff}
.p4-dashboard .report-meta{border-top:1px solid var(--transport-line);border-bottom:1px solid var(--transport-line);padding:13px 0;color:#536b76}
.p4-dashboard .p4-jump{margin:20px 0;gap:8px}
.p4-dashboard .p4-jump button{
 border:1px solid #cbdfe4;border-radius:999px;color:var(--transport-blue);
 background:#fff;font-size:12px;font-weight:700;padding:10px 15px;
}
.p4-dashboard .p4-jump button:hover{background:#e9f6f8;border-color:var(--transport-cyan)}
.p4-dashboard .month-summary{
 position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);
 gap:32px;background:linear-gradient(115deg,#13506f,#174d67 67%,#123d54);
 border:0;border-left:7px solid var(--transport-cyan);border-radius:8px;
 box-shadow:0 14px 26px #0b395318;padding:34px 38px;color:#fff;
}
.p4-dashboard .month-summary:after{
 content:"";position:absolute;right:0;top:0;width:96px;height:8px;background:var(--transport-orange);
}
.p4-dashboard .month-summary h2{color:#fff!important;font-size:clamp(29px,3vw,43px);line-height:1.2;letter-spacing:-.025em}
.p4-dashboard .month-summary .eyebrow{color:#8bf0ff!important}
.p4-dashboard .month-summary p,.p4-dashboard .month-summary small{color:#eef8fa;line-height:1.6}
.p4-dashboard .month-summary .review-box{border-left:1px solid #6c9daf;padding-left:24px;color:#fff}
.p4-dashboard .month-summary .review-box b{color:#fff;font-size:16px}
.p4-dashboard .month-summary .review-box p{color:#fff}
.p4-dashboard .month-summary .review-box small{color:#daedf4}
.p4-dashboard .p4-section{margin-top:52px}
.p4-dashboard .p4-section>h2{font-size:clamp(26px,2.6vw,35px);margin-bottom:20px}
.p4-dashboard .p4-questions .card{
 border:1px solid var(--transport-line);border-top:4px solid var(--transport-cyan);
 box-shadow:0 5px 18px #1244580a;min-height:210px;
}
.p4-dashboard .p4-questions .card:nth-child(2),.p4-dashboard .p4-questions .card:nth-child(5){border-top-color:var(--transport-green)}
.p4-dashboard .p4-questions .card:nth-child(3){border-top-color:var(--transport-orange)}
.p4-dashboard .p4-questions .num{color:var(--transport-blue);font-size:12px;letter-spacing:.11em}
.p4-dashboard .p4-questions h3{color:var(--transport-ink);line-height:1.28}
.p4-dashboard .p4-text-button{background:transparent;color:var(--transport-blue);padding:8px 0 0;text-decoration:underline;text-underline-offset:3px}
.p4-dashboard .card,.p5-evidence,.p5-social-card{border-color:var(--transport-line)}
/* Evidence and feasibility layouts. */
.p5-page{max-width:1220px;padding-top:58px;padding-bottom:65px}
.p5-page-head{border-bottom:2px solid var(--transport-line);padding-bottom:30px}
.p5-page-head h1{line-height:1.1;max-width:960px}
.p5-callout{background:#ecf5f1;border-left-color:var(--transport-green)}
.p5-table-wrap{box-shadow:0 10px 26px #15465a0a}
.p5-table th{background:#e8f1f4;color:var(--transport-ink)}
.p5-table td{line-height:1.5}
.p5-source{color:var(--transport-blue)}
.p5-badge{background:#e9f2e5;color:#355d20}
.p5-badge.conditional{background:#fff3e5;color:#90541d}
.p5-evidence{border-top:5px solid var(--transport-cyan);box-shadow:0 8px 24px #1244580d}
.p5-question summary{color:var(--transport-ink)}
.p5-qnum{color:var(--transport-blue)}
.p5-question summary:after{color:var(--transport-orange)}
.p5-question p{color:var(--transport-body)}
/* Public communication examples: richer but restrained, with visible review caveats. */
.p5-social-card{box-shadow:0 7px 24px #1244580e;border-radius:10px}
.p5-ig-tile{
 max-width:430px;background:linear-gradient(153deg,#156789 0%,#184c68 72%);
 border-radius:4px;box-shadow:inset 0 9px 0 var(--transport-cyan);
 padding:35px;
}
.p5-ig-tile .tile-stat{font-size:clamp(60px,7vw,91px);letter-spacing:-.05em}
.p5-ig-tile .tile-mark{color:#b4f1f4}
.p5-social-card h2{line-height:1.25}
.p5-copy{background:#f0f6f7}
.p5-no-photo{background:#eff5f6;border-color:#b9d5dc}
footer{background:white;border-top:1px solid var(--transport-line);color:#607986}
@media(max-width:1000px){
 header{gap:13px 20px}
 header nav{order:3;width:100%;margin:0;gap:14px}
 .hero{grid-template-columns:1fr 1fr;gap:30px;padding-inline:5%}
}
@media(max-width:740px){
 header{padding:14px 5%}
 header nav{order:4;width:100%;gap:10px 16px}
 header nav a{font-size:12px}
 header .dv5-report-link{order:2;font-size:11px;padding:8px 10px}
 header .pill{order:3;font-size:9px}
 .hero{grid-template-columns:1fr;padding:55px 6% 60px;gap:32px}
 .hero h1{font-size:clamp(39px,10vw,57px)}
 .preview{padding:25px}
 .dv5-secondary-link{display:block;margin:22px 0}
 .dv5-hero-principles{margin-top:22px}
 .section{padding:45px 6%}
 .grid{grid-template-columns:1fr}
 .band{display:block;padding:34px 6%}
 .band .btn{margin-top:12px}
 .p4-dashboard .topline{display:block}
 .p4-dashboard .month-summary{grid-template-columns:1fr;padding:26px 23px;gap:17px}
 .p4-dashboard .month-summary .review-box{border-left:0;border-top:1px solid #6c9daf;padding:18px 0 0}
 .p4-dashboard .p4-questions{grid-template-columns:1fr}
 .p5-page{padding:33px 5%}
 .p5-social-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{
 header,footer,.dv5-report-link{display:none!important}
 .p5-social-card,.p5-evidence{box-shadow:none}
 .p4-dashboard .month-summary{box-shadow:none;background:#fff;color:var(--transport-ink);border:1px solid var(--transport-line)}
 .p4-dashboard .month-summary h2,.p4-dashboard .month-summary p{color:var(--transport-ink)!important}
}

/* Executive report: consulting-grade hierarchy over identical dated evidence. */
.toolbar{background:var(--transport-ink);border-bottom:5px solid var(--transport-cyan);padding:16px clamp(18px,4vw,65px);gap:14px}
.toolbar span{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#e7f5f8}
.toolbar button{background:var(--transport-orange);color:#fff;border:0;font-size:13px;border-radius:5px;padding:12px 18px}
main#report{
 max-width:1060px;margin:30px auto 50px;padding:clamp(30px,5.5vw,75px);
 border-top:7px solid var(--transport-cyan);box-shadow:0 22px 56px #0f40541c;
}
#report>.eyebrow{color:var(--transport-blue);font-size:11px}
#report h1{font-size:clamp(35px,4vw,54px);letter-spacing:-.043em;max-width:850px;line-height:1.08;margin:12px 0 20px}
#report .lede{font-size:15px;max-width:780px;line-height:1.65;color:#536c77}
#report>.meta{display:inline-block;padding:10px 14px;background:#edf6f7;color:#275668;border-left:3px solid var(--transport-green);font-weight:700}
#report .report-rule{font-size:10px;letter-spacing:.17em;font-weight:800;color:var(--transport-blue);margin:35px 0 4px;padding-top:20px;border-top:1px solid var(--transport-line)}
#report h2{font-size:clamp(20px,2.5vw,29px);letter-spacing:-.02em;border-bottom:2px solid var(--transport-line);padding-bottom:13px;margin-top:38px}
#report .report-intro{max-width:800px;color:#486675;font-size:14px;line-height:1.6}
#report .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0}
#report .card{background:#f5fafb;border:1px solid var(--transport-line);border-top:5px solid var(--transport-cyan);padding:22px;box-shadow:none}
#report .card:nth-child(2){border-top-color:var(--transport-green)}
#report .card:nth-child(3){border-top-color:var(--transport-orange)}
#report .card .eyebrow{font-size:11px;letter-spacing:.07em;line-height:1.4}
#report .card .value{font-size:clamp(25px,2.5vw,36px);line-height:1.2;color:var(--transport-ink);font-weight:800;margin:15px 0}
#report .card .status{font-size:10px;color:#24657d;letter-spacing:.05em;word-break:break-word}
#report .card .note{font-size:12px;line-height:1.5;color:#496573}
#report .card details{font-size:11px;margin-top:15px;border-top:1px solid var(--transport-line);padding-top:11px}
#report .card summary{color:var(--transport-blue);font-weight:800;cursor:pointer}
#report dt{font-weight:800;margin-top:8px;color:#244b5e}
#report dd{margin:2px 0 0;overflow-wrap:anywhere}
#report .report-gaps{background:#f4f8f7;border-left:5px solid var(--transport-green);padding:4px 24px 23px;margin:26px 0}
#report .report-gaps h2{border:0;margin-top:22px;padding-bottom:0}
#report .report-gap-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
#report .report-gap-list li{display:grid;grid-template-columns:minmax(160px,.8fr) 1.6fr;gap:16px;padding-top:10px;border-top:1px solid var(--transport-line);font-size:12px;color:#45616e}
#report .report-gap-list strong{color:var(--transport-ink)}
#report .question{padding:18px 0;background:transparent;border:0;border-bottom:1px solid var(--transport-line)}
#report .question h3{color:var(--transport-ink);font-size:17px}
#report .question p{font-size:13px;line-height:1.58;max-width:800px}
#report .question .source{color:#286787;font-size:11px;margin-left:0}
#report>ul li{font-size:12px;margin-bottom:10px}
#report>.foot{border-top:1px solid var(--transport-line);padding-top:17px}
@media(max-width:740px){
 #report .cards{grid-template-columns:1fr}
 #report .report-gap-list li{grid-template-columns:1fr;gap:5px}
 main#report{margin:0;padding:27px}
 .toolbar{flex-wrap:wrap}
}
@media print{
 @page{size:letter;margin:.58in}
 #report{margin:0!important;max-width:none!important;padding:0!important;border:0!important;box-shadow:none!important}
 #report .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #report .card{padding:12px}
 #report .card .value{font-size:22px}
 #report .card details{display:none}
 #report .report-gaps{background:#fff;border:1px solid #bbcdd3;break-inside:avoid}
 #report .question,#report .card{break-inside:avoid}
 #report h2{break-after:avoid}
}

#report .metric-provenance{font-size:10px;color:#436675;line-height:1.5;border-top:1px solid var(--transport-line);padding-top:10px;overflow-wrap:anywhere}
@media print{#report .metric-provenance{font-size:9px;display:block}}