/* Route data explorer. Light theme only, like the rest of the portal; the page pins
   color-scheme so native controls never render dark on a dark-preference system. */
.px-page { color-scheme: light; background-color: transparent; }
.px-page, .px-page * { min-width: 0; }
.px-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.px-col { display: grid; gap: 1rem; min-width: 0; }
.px-card { overflow: hidden; }
.px-body { display: grid; gap: .6rem; }
.px-sub { font-size: .75rem; color: var(--muted, #5c6776); letter-spacing: .04em; text-transform: uppercase; }
.px-page input[type="search"] { width: 100%; min-height: 2.75rem; padding: .55rem .7rem; border: 1px solid var(--line, #d9dee6); border-radius: .4rem; background: #fff; color: #1b2330; font: inherit; }
.px-page input[type="date"], .px-page select { color: #1b2330; background: #fff; }
.px-count { margin: 0; }
.px-page .pw-table th { white-space: nowrap; overflow-wrap: normal; }

/* lists */
.px-list { display: grid; gap: .4rem; padding: 0; margin: 0; list-style: none; max-height: 16rem; overflow-y: auto; overscroll-behavior: contain; }
.px-item { display: grid; gap: .1rem; width: 100%; min-height: 2.75rem; padding: .55rem .7rem; border: 1px solid var(--line, #d9dee6); border-radius: .45rem; background: #fff; color: #1b2330; font: inherit; text-align: left; cursor: pointer; }
.px-item[aria-pressed="true"] { border-color: var(--accent, #0a7ea4); box-shadow: inset 0 0 0 1px var(--accent, #0a7ea4); background: #e6f2f7; }
.px-item-title { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.px-item-sub, .px-item-through { color: var(--muted, #5c6776); font-size: .8rem; font-variant-numeric: tabular-nums; }
.px-route { display: flex; gap: .65rem; align-items: center; min-height: 2.75rem; padding: .4rem .6rem; border: 1px solid var(--line, #d9dee6); border-radius: .45rem; background: #fff; cursor: pointer; }
.px-route--unassigned { border-style: dashed; }
.px-route:has(input:checked) { border-color: var(--accent, #0a7ea4); background: #e6f2f7; }
.px-route input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; }
.px-route-text { display: grid; gap: .05rem; flex: 1 1 auto; }
.px-route-label { display: inline-flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
.px-route-id { font-variant-numeric: tabular-nums; }
.px-route-name { color: var(--muted, #5c6776); }

/* chips */
.px-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; list-style: none; }
.px-chips:empty { display: none; }
.px-chip { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .15rem .15rem .15rem .6rem; border: 1px solid var(--accent, #0a7ea4); border-radius: 999px; background: #e6f2f7; color: #075c78; }
.px-chip .px-route-name { color: #075c78; }
.px-chip-x { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.px-chip-x:hover { background: rgba(10, 126, 164, .15); }
.px-capnote { margin: 0; color: var(--muted, #5c6776); font-size: .85rem; }
.px-capnote--over { padding: .6rem .7rem; border-left: 3px solid var(--danger, #d23035); background: #fee2e2; color: #8d1d20; font-weight: 600; }

/* options: one control per row at every width (the form column is narrow on desktop; a
   two-column grid broke "Positions" mid-word) */
.px-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.px-group { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: .25rem; }
.px-group > legend { padding: 0; margin-bottom: .25rem; color: var(--muted, #5c6776); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.px-seg { display: flex; flex-wrap: nowrap; border: 1px solid var(--line, #d9dee6); border-radius: .4rem; overflow: hidden; background: #fff; }
.px-seg label { position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-height: 2.75rem; padding: .4rem .35rem; white-space: nowrap; border-left: 1px solid var(--line, #d9dee6); background: #fff; color: #1b2330; font-weight: 650; text-align: center; cursor: pointer; }
.px-seg label:first-child { border-left: 0; }
.px-seg label:focus-within { outline: 2px solid var(--accent, #0a7ea4); outline-offset: -3px; }
.px-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.px-seg label.px-seg-on { background: var(--accent, #0a7ea4); color: #fff; }
.px-seg label.px-seg-off { opacity: .45; cursor: not-allowed; }
.px-preset-seg { display: none; }
.px-rangenote { margin: 0; }
@media (min-width: 560px) {
  .px-preset-seg { display: grid; }
  .px-preset-select { display: none; }
}
@media (min-width: 900px) {
  .px-main { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* preview + export */
.px-preview { display: grid; gap: .8rem; }
.px-facts { grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); }
.px-note { margin: 0; }
.px-actions { display: grid; gap: .5rem; }
.px-actions .pw-button { justify-self: stretch; }
.px-export-note { margin: 0; }
.px-error { display: grid; gap: .4rem; justify-items: start; }
.px-error p { margin: 0; }
.px-error-detail { font-size: .85rem; color: #6b1a1c; }
.px-job { display: grid; gap: .8rem; }
.px-badge { display: inline-block; justify-self: start; margin: 0; padding: .15rem .6rem; border-radius: 999px; background: #e6f2f7; color: #075c78; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.px-badge--done { background: #dcfce7; color: #0a7a3f; }
.px-badge--failed { background: #fee2e2; color: #b3261e; }
.px-badge--cancelled, .px-badge--expired { background: #f4f6fa; color: #5c6776; border: 1px solid var(--line, #d9dee6); }
.px-progress { width: 100%; height: .6rem; accent-color: var(--accent, #0a7ea4); }
.px-download { justify-self: stretch; justify-content: center; text-decoration: none; display: inline-flex; align-items: center; text-align: center; }
.px-download:hover { text-decoration: none; }
.px-hash { font-family: var(--font-mono, ui-monospace, Consolas, monospace); font-size: .8rem; word-break: break-all; }
.px-more { margin-top: .8rem; }

@media (max-width: 559px) {
  .px-facts { grid-template-columns: 1fr; }
  .px-actions .pw-button, .px-download { justify-self: stretch; }
}
@media (min-width: 560px) {
  .px-actions { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .px-actions .pw-button { justify-self: start; }
  .px-download { justify-self: start; }
}
@media (pointer: coarse) {
  .px-chip-x { width: 2.75rem; height: 2.75rem; }
  .px-chip { padding-top: 0; padding-bottom: 0; }
  .px-item, .px-route, .px-seg label, .px-page .pw-button, .px-page input[type="search"], .px-page .pw-field input, .px-page .pw-field select { min-height: 2.75rem; }
  .px-route input { width: 1.4rem; height: 1.4rem; }
}
@media (prefers-color-scheme: dark) {
  .px-page { color: #1b2330; }
}