#crossings { color-scheme: light; font: 16px/1.55 system-ui, sans-serif; color: #232327; background: #f5f3ed; }
#crossings, #crossings * { box-sizing: border-box; }
#crossings { max-width: 1050px; margin: auto; padding: 24px; }
#crossings h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; }
#crossings h2, #crossings h3 { line-height: 1.25; }
#crossings a { color: #873012; text-underline-offset: 3px; }
#crossings p, #crossings dd, #crossings td, #crossings button { overflow-wrap: anywhere; }
#crossings section { margin-block: 24px; }
#crossings .risk, #crossings fieldset, #crossings #detail { background: #fffefa; padding: 20px; border: 1px solid #b6afa3; border-radius: 10px; }
#crossings .risk { border-left: 5px solid #aa3b17; }
#crossings .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
#crossings button, #crossings input, #crossings select { font: inherit; min-height: 44px; max-width: 100%; border: 1px solid #767168; border-radius: 5px; padding: 8px 12px; }
#crossings button { background: #fff; color: #282422; cursor: pointer; }
#crossings button:disabled { cursor: default; background: #e8e5df; color: #625f59; }
#crossings button[aria-current="true"] { background: #802c12; color: white; border-color: #802c12; }
#crossings :focus-visible { outline: 3px solid #1254a0; outline-offset: 3px; }
#crossings label { display: block; }
#crossings select { width: 100%; margin-block: 8px; }
#crossings .actions, #crossings .interval, #crossings .event-nav { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
#crossings .actions > div { display: grid; gap: 6px; }
#crossings .actions a { display: inline-flex; align-items: center; min-height: 44px; }
#crossings .interval label { flex: 1 1 180px; }
#crossings .interval input { width: 100%; }
#crossings fieldset { min-width: 0; }
#crossings #interval-error { color: #9b250c; }
#crossings dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#crossings dt { font-weight: 650; }
#crossings dd { margin: 0; }
#crossings #timeline { display: flex; gap: 12px; padding: 12px 0; list-style: none; overflow-x: auto; }
#crossings #timeline li { flex: 0 0 160px; border-top: 4px solid #a49a88; padding-top: 12px; }
#crossings #timeline button { width: 100%; text-align: left; }
#crossings #timeline small { display: block; }
#crossings .table-scroll { overflow-x: auto; max-width: 100%; }
#crossings table { width: 100%; border-collapse: collapse; font-size: .94rem; }
#crossings caption { text-align: left; padding-bottom: 10px; }
#crossings th, #crossings td { text-align: left; padding: 10px; border-bottom: 1px solid #cec8bc; vertical-align: top; }
#crossings tr[data-selected="true"] { background: #f6e1d4; }
#crossings #detail table { table-layout: fixed; }
#crossings #detail th, #crossings #detail td { padding: 7px; }
#crossings [hidden] { display: none !important; }
@media (max-width: 520px) {
  #crossings { padding: 16px; }
  #crossings .risk, #crossings fieldset, #crossings #detail { padding: 12px; }
  #crossings dl { grid-template-columns: 1fr; }
  #crossings .event-nav button { flex: 1 1 140px; }
  #crossings .interval { align-items: stretch; }
  #crossings .interval button { width: 100%; }
  #crossings .table-scroll table { min-width: 600px; }
}