/* =============================================================================
   near.css — /cybertaxi/near/, the register searchable (labs 546)
   -----------------------------------------------------------------------------
   Loaded by near.php after cybertaxi's own site.css, on the house tokens. The
   form, the plot, the card extras (distance, links, capacity), the per-metro
   table. Dark answers at the foot, under html[data-dark].
   ========================================================================== */
.ch { margin: 1.6em 0 1.2em; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--ct-card, #fff); }
.ch-filters { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; }
@media (max-width: 900px) { .ch-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ch-field--q { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ch-filters { grid-template-columns: minmax(0, 1fr); } }
.ch-field { display: grid; gap: .25rem; min-width: 0; }
.ch-field > span:first-child { font-size: .74rem; color: var(--ink-55); }
.ch-input, .ch-sel {
    font: inherit; font-size: .92rem; width: 100%; max-width: 100%; min-width: 0; padding: .6rem .8rem;
    border-radius: 9px; border: 1px solid rgba(30, 38, 43, .5); background: var(--paper); color: var(--ink);
}
.ch-sel { padding-right: 2.2rem; cursor: pointer; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.ch-input::placeholder { color: var(--ink-55); }
.ch-input:disabled, .ch-sel:disabled { cursor: not-allowed; color: var(--ink-55); border-color: var(--line); }
.ch-input:focus-visible, .ch-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ch-selw { position: relative; display: block; min-width: 0; }
.ch-selw::after {
    content: ''; position: absolute; right: .8rem; top: 50%; width: 7px; height: 7px; margin-top: -6px;
    border-right: 1.8px solid var(--ink-77); border-bottom: 1.8px solid var(--ink-77); transform: rotate(45deg); pointer-events: none;
}
.ch-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin-top: .9rem; }
.ch-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-77); cursor: pointer; }
.ch-check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.ch-near { font: inherit; cursor: pointer; }
.ch-near[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.ch-near:disabled, .ch-reset:disabled { opacity: .5; cursor: not-allowed; }
.ch-reset {
    font: inherit; font-size: .9rem; font-weight: 600; padding: .7rem 1.1rem; border-radius: 999px; border: 1px solid var(--line);
    background: transparent; color: var(--ink); cursor: pointer;
}
.ch-reset:hover:not(:disabled) { border-color: var(--ink); }
.ch-msg { margin: .9rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--ink-77); min-height: 1.3em; }
.ch-msg--err { color: #991B1B; }
.ch-msg--warn { color: #92400E; }
.ch-help { margin: .4rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-55); max-width: 90ch; }

.ch-results { margin-top: 1.2em; }
.ch-plotwrap { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; aspect-ratio: 2 / 1; background: var(--tint); }
@media (max-width: 600px) { .ch-plotwrap { aspect-ratio: 4 / 3; } }
.ch-plot { display: block; width: 100%; height: 100%; cursor: crosshair; }
.ch-note { margin: .5rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-55); }
.ch-picked:empty { display: none; }
.ch-picked { margin-top: .8rem; }
.ch-picked .card { border-left-color: var(--accent); }
.ch-dist { margin: 0 0 .3rem; font-size: .78rem; font-weight: 600; color: var(--accent); }
.ch-cap { margin: .45rem 0 0; font-size: .8rem; color: var(--ink-55); }
.ch-links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .5rem 0 0; font-size: .8rem; }
.ch-card .cline .tag { font-weight: 600; }
.ch-more {
    font: inherit; font-size: .9rem; font-weight: 600; margin-top: .9rem; padding: .7rem 1.1rem; border-radius: 999px;
    border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
}
.ch-more:hover { border-color: var(--ink); }
.ch-src { margin: .6rem 0 0; font-size: .8rem; color: var(--ink-55); }

.ch-tablewrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--ct-card, #fff); }
.ch-t { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ch-t th, .ch-t td { padding: .5rem .8rem; text-align: left; border-top: 1px solid var(--line-soft); color: var(--ink-77); white-space: nowrap; }
.ch-t thead th { border-top: 0; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); white-space: normal; vertical-align: bottom; }
.ch-t .n { text-align: right; font-variant-numeric: tabular-nums; }
.ch-t td:first-child a { color: var(--ink); font-weight: 600; }
.ch-t__tot th, .ch-t__tot td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); }
.ch-list { margin: .4em 0 1em; padding-left: 1.2rem; }
.ch-list li { margin: 0 0 .55rem; line-height: 1.62; color: var(--ink-77); max-width: 78ch; }
.ch-list b { color: var(--ink); }
.ch-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; padding: .05em .3em; border-radius: 4px; background: var(--line-soft); color: var(--ink); }

@media (hover: none) and (pointer: coarse) { .ch-input, .ch-sel { font-size: 16px; min-height: 44px; } }

/* ---- the dark edition ---- */
html[data-dark] .ch-input, html[data-dark] .ch-sel { background: #121922; border-color: rgba(255, 255, 255, .34); color: var(--ink); }
html[data-dark] .ch-input:disabled, html[data-dark] .ch-sel:disabled { border-color: var(--line); color: var(--ink-55); }
html[data-dark] .ch-sel option { background: #121922; color: #fff; }
html[data-dark] .ch-msg--err { color: #F87171; }
html[data-dark] .ch-msg--warn { color: #FBBF24; }