:root { font-family: system-ui, sans-serif; color: #202b32; background: #f4f6f7; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header { background: #1d3c4b; color: white; padding: .85rem max(1rem, calc((100vw - 1400px) / 2)); }
h1 { margin: 0; font-size: 1.4rem; }
header p { margin: .25rem 0 0; }
main { max-width: 1400px; margin: 1.25rem auto; padding: 0 1rem; }
.layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: .85rem; }
.card { background: white; border: 1px solid #d7dfe2; border-radius: 7px; padding: .8rem; margin-bottom: .8rem; }
.card h2, .card h3 { margin-top: 0; }
.card h2 { font-size: 1.15rem; }
.card h3 { font-size: 1rem; }
form { margin: 0 0 1rem; }
label { display: block; font-weight: 600; margin: .6rem 0; }
input, select { display: block; width: 100%; padding: .4rem .45rem; margin-top: .2rem; font: inherit; border: 1px solid #9caeb7; border-radius: 4px; }
button { padding: .4rem .65rem; font: inherit; background: #1d3c4b; color: white; border: 0; border-radius: 4px; cursor: pointer; }
button:hover { background: #31586a; }
button.secondary { background: #e7ecef; color: #202b32; }
button.danger { background: #8b3131; }
.intersection-list { list-style: none; padding: 0; }
.intersection-list li { margin: .35rem 0; }
.intersection-list button { width: 100%; text-align: left; overflow-wrap: anywhere; line-height: 1.2; }
.intersection-list button[aria-current="true"] { background: #167181; }
.periods { display: grid; gap: 1rem; }
.period { border: 1px solid #d7dfe2; border-radius: 5px; padding: .75rem; }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.hint { color: #53636c; font-size: .9rem; }
.feedback { padding: .7rem; margin-bottom: 1rem; border-radius: 4px; background: #fff1e9; color: #762d16; }
.feedback:empty { display: none; }
@media (max-width: 700px) { .layout, .fields { grid-template-columns: 1fr; } }
.workspace-tabs { display: flex; align-items: end; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.workspace-tabs button[aria-current="true"] { background: #167181; }
.project-name-control { display: flex; align-items: end; gap: .35rem; margin: 0 0 0 auto; }
.project-name-control label { margin: 0; font-size: .8rem; }
.project-name-control input { min-width: 14rem; margin-top: .1rem; padding: .3rem .4rem; }
.entry-controls { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
.entry-controls label { min-width: 130px; margin: 0; }
.grid-scroll { overflow-x: auto; max-width: 100%; }
.count-grid { border-collapse: collapse; white-space: nowrap; font-size: .88rem; }
.count-grid th, .count-grid td { border: 1px solid #ccd7dc; padding: .2rem; text-align: center; }
.count-grid th { background: #e7eef1; }
.count-grid input { width: 4.25rem; margin: 0; padding: .3rem; }
.count-grid input[type="time"] { width: 7rem; }
.count-grid input.modified { background: #fff0c7; border-color: #ae7120; font-weight: 700; }
.count-value { display: inline-block; min-width: 2rem; min-height: 1.2rem; }
.count-value.modified { background: #fff0c7; color: #70460b; font-weight: 700; }
.geometry-summary { margin: 0; color: #53636c; }
.active-mode-section { padding: .8rem 1rem; }
.active-mode-section h2 { font-size: 1.05rem; margin-bottom: .25rem; }
.active-mode-section .hint { margin: .25rem 0 .6rem; }
.active-mode-table { border-collapse: collapse; white-space: nowrap; width: 100%; font-size: .9rem; }
.active-mode-table th, .active-mode-table td { border-bottom: 1px solid #e1e7ea; padding: .3rem .5rem; text-align: left; }
.active-mode-table th { background: #f3f6f7; }
.active-mode-table input { width: 5.5rem; margin: 0; padding: .3rem; }
.active-mode-table input.modified { background: #fff0c7; border-color: #ae7120; font-weight: 700; }
.active-value.modified { background: #fff0c7; color: #70460b; font-weight: 700; }
.results-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr) 100px; gap: .85rem; align-items: start; }
.results-intersections { grid-column: 1; grid-row: 1; position: sticky; top: .75rem;
  max-height: calc(100vh - 1.5rem); overflow-y: auto; }
.results-sheet { grid-column: 2; grid-row: 1; min-width: 0; }
.results-section-nav { grid-column: 3; grid-row: 1; position: sticky; top: .75rem; display: grid; gap: .25rem; }
.results-section-nav a { color: #165d71; padding: .3rem .4rem; border-radius: 4px; text-decoration: none; font-weight: 600; }
.results-section-nav a:hover, .results-section-nav a:focus { background: #e8f2f4; }
.overall-result, .peak-result { scroll-margin-top: 1rem; }
.result-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0; }
.result-tabs button { background: #e7ecef; color: #202b32; }
.result-tabs button[aria-current="true"] { background: #167181; color: white; }
.result-title { font-size: 1.15rem; margin-bottom: .4rem; }
.result-context { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; color: #53636c; margin: .35rem 0 0; }
.warning-inline, .result-warning { border-left: 3px solid #ae7120; background: #fff8e8; padding: .55rem .7rem; }
.result-warning { margin: .7rem 0; color: #65410e; }
.result-warning ul { margin: .35rem 0 0; padding-left: 1.25rem; }
.result-warning li + li { margin-top: .2rem; }
.results-table { border-collapse: collapse; width: 100%; white-space: nowrap; }
.results-table th, .results-table td { border: 1px solid #ccd7dc; padding: .32rem .38rem; text-align: right; }
.results-table tbody th:first-child, .results-table thead tr:first-child > th:first-child { text-align: left; }
.results-table thead th { background: #e7eef1; }
.grouped-results-table thead tr:nth-child(2) th,
.peak-table thead tr:nth-child(2) th { text-align: center; }
.peak-result > h2 { border-bottom: 2px solid #7e929c; padding-bottom: .45rem; }
.peak-table-scroll { margin-top: .85rem; }
.peak-table, .grouped-results-table { width: 100%; min-width: 760px; font-size: .86rem; }
.peak-table thead tr:first-child > th:first-child,
.peak-table tbody tr > th:first-child,
.grouped-results-table thead tr:first-child > th:first-child,
.grouped-results-table tbody tr > th:first-child { min-width: 7.5rem; }
.peak-table td, .peak-table thead tr:first-child > th:not(:first-child),
.peak-table thead tr:nth-child(2) > th,
.grouped-results-table td, .grouped-results-table thead tr:first-child > th:not(:first-child),
.grouped-results-table thead tr:nth-child(2) > th { min-width: 2.7rem; }
.peak-table thead tr:first-child th:not(:first-child),
.grouped-results-table thead tr:first-child th:not(:first-child) { text-align: center; background: #dbe7eb; }
.approach-roadway, .approach-direction { display: block; }
.approach-roadway { white-space: normal; font-size: .78rem; color: #53636c; }
.peak-table .source-interval th { font-weight: 600; }
.peak-table tbody tr:nth-child(even) { background: #f8fafb; }
.peak-table .approach-summary td { text-align: center; font-weight: 600; }
.peak-table tbody tr:not(.source-interval) th { background: #eef3f5; }
.peak-table tbody tr.result-section-header th,
.grouped-results-table tbody tr.result-section-header th { background: #cfdde3; color: #173845; font-weight: 700;
  text-align: left; border-top: 3px solid #718994; padding-top: .4rem; padding-bottom: .4rem; }
.results-table .section-end th, .results-table .section-end td { border-bottom: 3px solid #718994; }
.custom-period-heading { margin: 1.25rem 0 .65rem; font-size: 1.2rem; }
.result-total { display: flex; justify-content: space-between; gap: 1rem; border-top: 2px solid #7e929c; padding: .65rem .4rem; }
.result-total strong { font-size: 1.15rem; }
.summary-lines { display: grid; gap: .3rem; margin-top: .6rem; }
.summary-lines > div, .compact-list > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #e1e7ea; padding: .35rem .1rem; }
.summary-lines span { color: #53636c; }
.results-subsection { margin-top: 1rem; }
.results-subsection h3 { margin-bottom: .25rem; }
.compact-list { margin: 0; }
.compact-list dt, .compact-list dd { margin: 0; }
.results-disclosure { border-top: 1px solid #d7dfe2; margin-top: 1rem; padding-top: .6rem; }
.results-disclosure summary { cursor: pointer; font-weight: 600; }
.results-disclosure form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .6rem; }
.results-disclosure label { display: flex; align-items: center; gap: .3rem; margin: 0; }
.results-disclosure input { width: auto; margin: 0; }
.results-note { margin: .6rem 0 0; color: #53636c; }
.results-view-nav, .tmc-table-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; }
.results-view-nav { margin-top: .65rem; }
.tmc-table-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.tmc-table-head h2 { margin-bottom: 0; }
.tmc-table-print-meta { display: none; }
.tmc-table-controls { margin: .8rem 0; }
.tmc-table-controls label { display: flex; align-items: center; gap: .3rem; margin: 0; font-size: .9rem; }
.tmc-table-controls input { width: auto; margin: 0; }
.tmc-table-scroll { max-height: 70vh; overflow: auto; border: 1px solid #d7dfe2; padding: 0; }
.tmc-table { min-width: 760px; border-collapse: separate; border-spacing: 0; }
.tmc-table thead { position: sticky; top: 0; z-index: 4; background: #e7eef1; }
.tmc-table thead th { position: static; background: #e7eef1; }
.tmc-table thead tr:first-child th:not(:first-child) { background: #dbe7eb; }
.tmc-table thead th:first-child, .tmc-table tbody th:first-child { position: sticky; left: 0; text-align: left; min-width: 8rem; }
.tmc-table thead th:first-child { z-index: 5; background: #e7eef1; }
.tmc-table tbody th:first-child { z-index: 2; background: #f8fafb; }
.tmc-table td { text-align: right; }
.tmc-table .tmc-hour-total th, .tmc-table .tmc-hour-total td { background: #eaf1f3; font-weight: 700; border-top: 2px solid #718994; }
.tmc-table .tmc-session-break > th, .tmc-table .tmc-session-break > td { border-top: 5px solid #f8fafb; box-shadow: inset 0 2px 0 #718994; }
.tmc-diagram { margin: .85rem 0 1rem; border: 1px solid #d7dfe2; border-radius: 5px; padding: .65rem; background: #fbfcfc; overflow-x: auto; }
.tmc-diagram-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .45rem; }
.tmc-diagram-head h3 { margin: 0; font-size: 1rem; }
.tmc-diagram-canvas-wrap { position: relative; overflow: auto; border: 1px solid #e1e7ea; background: #fff; }
.tmc-diagram-overlay { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(255,255,255,.96); border: 1px solid #d7dfe2; border-radius: 6px; padding: .45rem .55rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); font-size: .78rem; }
.tmc-diagram-option { display: grid; grid-template-columns: 126px minmax(108px, auto); align-items: center; gap: .45rem; margin: .18rem 0; }
.tmc-diagram-option label { display: flex; align-items: center; gap: .35rem; min-width: 0; margin: 0; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.tmc-diagram-option input[type="checkbox"] { display: inline-block; flex: 0 0 auto; width: auto; margin: 0; }
.tmc-diagram-option select { grid-column: 2; width: 100%; min-width: 108px; margin: 0; padding: .2rem .3rem; font-size: .78rem; }
.tmc-diagram-canvas { display: block; width: 100%; min-width: 900px; height: auto; max-width: none; background: white; border: 1px solid #e1e7ea; }
.tmc-diagram-legend { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: .65rem; font-size: .8rem; color: #53636c; }
.tmc-diagram-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.diagram-swatch { width: 18px; height: 10px; border-radius: 3px; background: #666; border: 1px solid transparent; }
.diagram-swatch.vehicle { background: #0f6e7c; }
.diagram-swatch.heavy { background: #fff8e8; border-color: #9b7a2f; }
.diagram-swatch.bike { background: #dff5f5; border-color: #0e7880; }
.diagram-swatch.pedestrian { height: 0; border: 0; border-radius: 0; border-top: 3px solid #7a3e8e; background: transparent; }
.active-result h2, .peak-details h2 { font-size: 1.05rem; }
.import-preview { border-collapse: collapse; white-space: nowrap; }
.import-preview th, .import-preview td { border: 1px solid #ccd7dc; padding: .3rem .5rem; }
.import-preview th { background: #e7eef1; }
.import-mapping-editor .fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mapping-columns { display: grid; gap: .4rem; margin: 1rem 0; }
.mapping-column { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .5rem; border-top: 1px solid #d7dfe2; }
.import-mapping-editor input[type="checkbox"] { width: auto; display: inline; margin-right: .4rem; }
.uncertain { color: #8b3131; font-size: .85rem; margin-left: .3rem; }
.import-workspace { max-width: 900px; }
.input-landing { padding: 1.5rem; }
.input-landing p { color: #53636c; }
.import-file-label { max-width: 440px; }
.import-drop-zone { display: grid; gap: .35rem; place-items: center; margin: .8rem 0; padding: 1rem; border: 1px dashed #718994; border-radius: .5rem; background: #f8fafb; color: #53636c; text-align: center; }
.import-drop-zone.drag-over { border-color: #165d71; background: #e8f2f4; color: #173845; }
.import-drop-zone span { font-size: .85rem; }
.import-batch-progress { padding: .55rem .7rem; background: #e8f2f4; border-radius: 4px; font-weight: 700; }
.import-file-queue { display: grid; gap: .5rem; padding-left: 1.5rem; }
.import-file-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .5rem; align-items: center;
  padding: .55rem; border: 1px solid #d7dfe2; border-radius: 5px; }
.import-file-entry.active { border-color: #167181; background: #f0f8f9; box-shadow: inset 3px 0 #167181; }
.import-file-entry > div { display: grid; gap: .15rem; }
.import-file-entry label { margin: 0; font-size: .85rem; }
.import-file-entry label input { display: inline; width: auto; margin-right: .25rem; }
.import-file-status { font-weight: 700; }
.import-active-file { color: #165d71; font-weight: 700; }
.import-detected-list { margin: 1rem 0; }
.import-detected-list h3 { margin-bottom: .5rem; }
.import-choice { display: flex; align-items: center; gap: .65rem; border-top: 1px solid #e1e7ea; padding: .35rem 0; }
.import-choice label { margin: 0; }
.import-choice input { width: auto; margin: 0; }
.import-choice-select { flex: 1; background: transparent; color: inherit; text-align: left; padding: .25rem; }
.import-choice-select:hover, .import-choice-select[aria-current="true"] { background: #e8f2f4; color: #174354; }
.import-choice-select strong, .import-choice-select small { display: block; }
.import-choice-select small { color: #53636c; margin-top: .15rem; }
.import-choice[data-group] { display: grid; grid-template-columns: auto minmax(16rem, 1fr) minmax(12rem, auto); align-items: start; gap: .75rem 1rem; padding: .8rem 0; }
.import-choice[data-group] h3, .import-choice[data-group] p { margin: 0 0 .25rem; }
.import-choice[data-group] details { grid-column: 1 / -1; width: 100%; }
.import-choice[data-group] details[open] { padding: .5rem .75rem; background: #f4f7f8; border-radius: .35rem; }
@media (max-width: 700px) { .import-choice[data-group] { grid-template-columns: 1fr; } .import-choice[data-group] details { grid-column: 1; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.app-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .2rem; width: fit-content; max-width: calc(100% - 2rem); margin: 1.5rem auto; padding: .45rem .8rem; border: 1px solid #d7dfe2; border-radius: 999px; background: #f8fafb; color: #53636c; font-size: .8rem; }
.app-footer a, .footer-share { color: #165d71; font-weight: 700; }
.footer-share { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.footer-share:hover { background: transparent; color: #165d71; }
.footer-share:focus-visible { outline: 2px solid #165d71; outline-offset: 2px; border-radius: 2px; }
.import-preview-panel { border-top: 1px solid #d7dfe2; padding-top: 1rem; }
.import-preview-panel h3, .import-preview-panel h4 { margin: 0 0 .6rem; }
.import-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .9rem; }
.import-summary-grid div { border: 1px solid #d7dfe2; border-radius: 5px; padding: .45rem .55rem; min-width: 0; }
.import-summary-grid span { display: block; color: #53636c; text-transform: uppercase; font-size: .7rem; font-weight: 700; }
.import-summary-grid strong { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.import-detected-mapping { margin: .8rem 0; }
.import-detected-mapping div { display: flex; flex-wrap: wrap; gap: .4rem; }
.import-detected-mapping span { background: #edf3f5; border: 1px solid #d7dfe2; border-radius: 4px; padding: .2rem .4rem; font-size: .82rem; }
.import-message { background: #fff5e9; border: 1px solid #edcba3; color: #762d16; padding: .6rem .8rem; border-radius: 5px; }
.import-message ul { margin: .3rem 0 0; padding-left: 1.3rem; }
.import-sample-scroll { border: 1px solid #d7dfe2; border-radius: 5px; margin-bottom: 1rem; }
.import-sample-scroll .import-preview { font-size: .82rem; }
.import-mapping-editor { border-top: 1px solid #d7dfe2; margin-top: 1rem; padding-top: 1rem; }
.import-status { color: #21624b; font-size: .85rem; font-weight: 700; }
.import-status.needs-review, .import-attention { color: #8b3131; }
.import-worksheet-tools summary { color: #165d71; font-weight: 600; cursor: pointer; }
.import-actions { margin: 1rem 0; }
.import-worksheet-tools { border-top: 1px solid #d7dfe2; padding-top: .75rem; }
.import-worksheet-tools[open] summary { margin-bottom: .75rem; }
@media (max-width: 700px) { .import-mapping-editor .fields, .mapping-column { grid-template-columns: 1fr; } .import-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .import-file-entry { grid-template-columns: 1fr; }
  .project-name-control { flex: 1 1 100%; margin-left: 0; }
  .project-name-control label { flex: 1; }
  .project-name-control input { min-width: 0; }
  .results-layout { grid-template-columns: minmax(0, 1fr); }
  .results-intersections { grid-column: 1; grid-row: 1; position: static; max-height: none;
    overflow-y: visible; margin-bottom: 0; }
  .results-section-nav { grid-column: 1; grid-row: 2; top: 0; z-index: 2; display: flex; flex-wrap: wrap;
    gap: .15rem; margin-bottom: .8rem; padding: .4rem; }
  .results-section-nav a { flex: 1 1 auto; text-align: center; }
  .results-sheet { grid-column: 1; grid-row: 3; }
  .overall-result, .peak-result { scroll-margin-top: 3.5rem; }
}
@media print {
  @page { size: landscape; margin: .35in; }
  .workspace-tabs, .results-intersections, .results-section-nav, .results-view-nav,
  .tmc-table-controls, .tmc-table-head button, .app-footer, #feedback { display: none !important; }
  .results-layout { display: block; }
  .tmc-table-scroll { max-height: none; overflow: visible; border: 0; }
  .tmc-table { width: 100%; min-width: 0; font-size: .72rem; }
  .tmc-table thead { display: table-header-group; }
  .tmc-table tr { break-inside: avoid; }
  .tmc-table .tmc-session-break > th, .tmc-table .tmc-session-break > td { border-top: 2px solid #718994; box-shadow: none; }
  .tmc-table-print-meta { display: block; }
  .tmc-diagram-overlay, .tmc-diagram-head button { display: none !important; }
}