/* Rail Globe China train extension. Upstream copyright and license remain in LICENSE.
   Restyled 2026-10-13 to the card's own look: the page's colour variables, 20px groups,
   capsule buttons and chips, no borders or gradients of its own. */
#tab-trains { gap: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.train-summary { padding: 12px 14px; border-radius: 20px; background: var(--fill2); }
.train-summary-top, .train-count, .train-small-controls, .train-actions, .train-detail-title, .train-list-top { display: flex; align-items: center; gap: 8px; }
.train-summary-top, .train-small-controls, .train-detail-title { justify-content: space-between; }
.train-mode { color: var(--label2); background: var(--fill2); border-radius: 999px; padding: 2px 8px; font-size: 0.6875rem; white-space: nowrap; }
.train-clock { color: var(--label2); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.train-count { margin: 10px 0 4px; align-items: baseline; }
.train-count strong { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.train-count > span { font-size: 0.75rem; color: var(--label2); }
/* (the two switches are the page's own, as in the list of layers: the words, then the switch) */
.train-toggle { margin-left: auto; font-size: 0.75rem; color: var(--label2); white-space: nowrap; align-self: center; display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 8px; cursor: pointer; }
.train-muted { margin: 6px 0 0; color: var(--label2); font-size: 0.75rem; line-height: 1.5; }
/* The sentence under the count ("positions are estimated … may be off") is not shown (owner, 2026-10-13:
   the disclaimers make the card untidy): the label above it says "时刻表估算", and the sources and what is
   covered are in the folded note at the foot of the tab. */
.train-disclosure { display: none; }
.train-controls { display: grid; gap: 8px; }
.train-search { display: block; background: var(--fill2); border-radius: 20px; transition: background-color 160ms ease-out; }
.train-search:focus-within { background: var(--fill); }
.train-search input { display: block; width: 100%; min-width: 0; box-sizing: border-box; border: 0; border-radius: inherit; background: transparent; color: var(--label); padding: 8px 14px; outline-offset: 0; font-size: 0.9375rem; -webkit-appearance: none; appearance: none; }
.train-search input::placeholder { color: var(--label2); }
.train-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.train-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.train-filters button { flex: none; padding: 5px 11px; border: 0; background: var(--fill2); color: var(--label); border-radius: 999px; font-size: 0.75rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.train-filters button[aria-pressed="true"] { font-weight: 600; background: rgba(99, 99, 102, 0.9); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.08) inset; }
.train-small-controls { font-size: 0.75rem; color: var(--label2); margin: 0 4px; }
.train-small-controls label { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 8px; cursor: pointer; }
.train-small-controls .link { font-size: 0.8125rem; color: var(--blue); }
.train-time-panel { padding: 12px 14px; background: var(--fill2); border-radius: 20px; display: grid; gap: 8px; font-size: 0.8125rem; }
.train-time-panel input { width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; background: var(--fill); color: var(--label); padding: 8px 10px; }
.train-actions { flex-wrap: wrap; gap: 6px; }
.train-button { border: 0; border-radius: 999px; padding: 6px 12px; background: var(--fill2); color: var(--label); cursor: pointer; font-size: 0.8125rem; font-weight: 500; }
.train-button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.train-button:disabled { opacity: 0.4; cursor: default; }
.train-error { background: rgba(255, 69, 58, 0.16); border-radius: 20px; padding: 12px 14px; font-size: 0.8125rem; }
.train-error p { margin: 0 0 8px; overflow-wrap: anywhere; }
.train-list { margin: 0; padding: 0; list-style: none; border-radius: 20px; background: var(--fill2); overflow: hidden; }
.train-list:empty { display: none; }
.train-list li { min-width: 0; }
.train-list li + li { border-top: 0.5px solid var(--sep); }
.train-list button { display: block; text-align: left; width: 100%; box-sizing: border-box; border: 0; padding: 10px 14px; background: transparent; color: var(--label); cursor: pointer; }
.train-list button:hover, .train-list button:focus-visible { background: var(--fill2); }
.train-list button[aria-pressed="true"] { background: rgba(10, 132, 255, 0.2); }
.train-number { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.train-kind-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.train-status { margin-left: auto; font-size: 0.6875rem; color: var(--label2); background: var(--fill2); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.train-status.inactive { color: var(--label3); }
.train-od { margin-top: 4px; font-size: 0.8125rem; color: var(--label); display: block; overflow-wrap: anywhere; }
.train-route-sub { margin-top: 2px; font-size: 0.75rem; color: var(--label2); display: block; }
.train-more { width: 100%; border: 0; border-radius: 999px; background: var(--fill2); color: var(--blue); padding: 8px 12px; margin-top: 8px; font-size: 0.8125rem; cursor: pointer; }
/* (the chosen train's card is a group like the others, grey, not tinted: it is tall, and a tall
   blue card reads as a different app; what it holds sits one step lighter) */
.train-detail { background: var(--fill2); border-radius: 20px; padding: 12px 14px; }
.train-detail .train-mode, .train-detail .train-button { background: var(--fill); }
.train-detail .train-button[aria-pressed="true"] { background: var(--blue); }
.train-detail-title h2 { margin: 0; font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* (the cross is drawn, two strokes about the middle of the circle: a typed "×" sits where its
   font puts it, which is not the middle) */
.train-close { flex: none; position: relative; border: 0; border-radius: 50%; background: var(--fill); color: var(--label2); width: 28px; height: 28px; padding: 0; font-size: 0; cursor: pointer; }
.train-close::before, .train-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; border-radius: 1px; background: currentColor; }
.train-close::before { transform: rotate(45deg); }
.train-close::after { transform: rotate(-45deg); }
.train-detail .train-od { font-size: 0.875rem; margin: 6px 0; }
.train-detail .train-actions { margin-top: 10px; }
/* (the lines a train runs along: the list a route between two stations has, in a group one step lighter) */
.train-lines { margin-top: 10px; }
.train-lines-cap { margin: 0 0 6px; font-size: 0.75rem; color: var(--label2); }
.train-lines .steps { border-radius: 14px; background: var(--fill2); overflow: hidden; }
.train-lines .steps li { padding: 8px 12px; font-size: 0.875rem; }
.train-lines .steps li + li { border-top: 0.5px solid var(--sep); }
.train-lines .steps li.minor { padding-top: 5px; padding-bottom: 5px; font-size: 0.75rem; }
.train-progress { height: 3px; background: var(--fill); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.train-progress > i { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
.train-detail-state { margin: 8px 0 0; font-size: 0.8125rem; color: var(--label); }
.train-stop-table { width: 100%; margin-top: 10px; border-collapse: separate; border-spacing: 0; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.train-stop-table th { padding: 5px 6px; text-align: left; color: var(--label2); font-weight: 400; }
.train-stop-table td { padding: 7px 6px; border-top: 0.5px solid var(--sep); vertical-align: top; }
.train-stop-table td:not(:first-child) { white-space: nowrap; }
.train-stop-table td.train-delay { white-space: normal; min-width: 38px; }
.train-stop-table tr.current { color: var(--label); font-weight: 600; }
.train-stop-table tr.current td { background: var(--fill); border-top-color: transparent; }
.train-stop-table tr.current + tr td { border-top-color: transparent; }
.train-stop-table tr.current td:first-child { border-radius: 8px 0 0 8px; }
.train-stop-table tr.current td:last-child { border-radius: 0 8px 8px 0; }
.train-stop-table tr.past { color: var(--label3); }
.train-stop-table small { font-size: 0.625rem; color: var(--label2); }
.train-delay { max-width: 68px; overflow-wrap: anywhere; }
.train-detail details { margin-top: 10px; font-size: 0.8125rem; }
.train-detail summary, .train-about summary { cursor: pointer; color: var(--label2); }
.train-about { margin: 0 4px 8px; padding-top: 10px; border-top: 0.5px solid var(--sep); color: var(--label2); font-size: 0.75rem; line-height: 1.55; }
.train-about p { margin: 8px 0; overflow-wrap: anywhere; }
.train-about a, .train-detail a { color: var(--blue); text-decoration: none; }
/* The note on the map ("列车 · 时刻表估算") is not shown (owner, 2026-10-13: "去掉"): the card says
   the same in its label and its sentence about estimates. The element stays for the script. */
.train-map-badge { display: none; }
@media (max-width:720px) {
  .train-search input, .train-time-panel input { font-size: 16px; }
  .train-small-controls { min-height: 30px; }
  .train-filters button { min-height: 36px; padding: 0 12px; }
  .train-button { min-height: 36px; }
  .train-list button { min-height: 44px; }
}

/* The extension never restyles or hides the country's navigation and language control. */
#tab-trains .train-summary-top, #tab-trains .train-count { flex-wrap: wrap; }
#tab-trains .train-mode { white-space: normal; }
#tab-trains .train-small-controls { flex-wrap: wrap; }
#tab-trains .train-stop-table { table-layout: fixed; }
#tab-trains .train-stop-table td, #tab-trains .train-stop-table th { overflow-wrap: anywhere; }
#tab-trains .train-stop-table td:not(:first-child) { white-space: normal; }