/* Freight (set FRT): /freight/ and its pages. Colours are the site's own tokens, so light and dark follow the theme. No
   operator or shipping-line brand colour is used for the interface: the swatches show a box's colour as data. */
:root { --fr-port: var(--fg); --fr-term: #2E6DA4; --fr-yard: #A35A1E; --fr-land: #ECEAE4; --fr-coast: #CFCCC4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fr-term: #7DB3E0; --fr-yard: #E3A066; --fr-land: #24272D; --fr-coast: #3A3D44; } }
:root[data-theme="dark"] { --fr-term: #7DB3E0; --fr-yard: #E3A066; --fr-land: #24272D; --fr-coast: #3A3D44; }

.fr-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 18px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.fr-nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.fr-nav a[aria-current="page"] { color: var(--fg); border-bottom: 2px solid var(--fg); }
.fr-nav a:hover { color: var(--fg); }

.fr-fig { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; margin: 14px 0; }
.fr-map { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.fr-map text { font-family: inherit; font-size: 11.5px; fill: var(--fg); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.fr-map .land { fill: var(--fr-land); stroke: var(--fr-coast); stroke-width: .8; }
.fr-map .pt rect, .fr-map rect.pt { fill: var(--fr-port); stroke: var(--surface); stroke-width: 1.5; }
.fr-map .tm circle, .fr-map circle.tm { fill: var(--fr-term); stroke: var(--surface); stroke-width: 1.5; }
.fr-map .yd path, .fr-map path.yd { fill: var(--fr-yard); stroke: var(--surface); stroke-width: 1.2; }

.fr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 14px 0; }
.fr-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px 14px; color: var(--fg); text-decoration: none; }
.fr-card:hover { border-color: var(--fg); }
.fr-card b { font-size: 1.05rem; }
.fr-owner { font-size: 0.9rem; }
.fr-classes { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-top: auto; }

.fr-table { width: 100%; font-size: 0.88rem; }
.fr-table :is(th, td) { vertical-align: top; }
.fr-locos, .fr-wagons { min-width: 980px; }
.fr-fleet { table-layout: fixed; }
.fr-fleet th:nth-child(1), .fr-fleet td:nth-child(1) { width: 7.5rem; }
.fr-fleet th:nth-child(2), .fr-fleet td:nth-child(2) { width: 5.5rem; }
.fr-fleet th:nth-child(4), .fr-fleet td:nth-child(4) { width: 8.5rem; }
.fr-routes { table-layout: fixed; min-width: 900px; }
.fr-routes th:nth-child(1), .fr-routes td:nth-child(1) { width: 15%; }
.fr-routes th:nth-child(2), .fr-routes td:nth-child(2) { width: 19%; }
.fr-routes th:nth-child(3), .fr-routes td:nth-child(3) { width: 30%; }
.fr-routes th:nth-child(4), .fr-routes td:nth-child(4) { width: 16%; }
.fr-flows { table-layout: fixed; min-width: 760px; }
.fr-flows th:nth-child(1), .fr-flows td:nth-child(1) { width: 22%; }
.fr-flows th:nth-child(2), .fr-flows td:nth-child(2) { width: 12%; }
.fr-flows th:nth-child(3), .fr-flows td:nth-child(3) { width: 24%; }
.fr-flows th:nth-child(4), .fr-flows td:nth-child(4) { width: 24%; }
.fr-table .ft-m { display: block; font-size: 0.8em; color: var(--muted); }
.fr-tbd { font-weight: 650; color: var(--muted); }
.fr-unv { font-size: 0.82rem; margin-top: 4px; color: var(--muted); }
.fr-unv summary { cursor: pointer; }
.fr-unv ul { margin: 4px 0; padding-left: 1.1em; }
.fr-fold { margin: 8px 0; border-top: 1px solid var(--rule); }
.fr-fold summary { cursor: pointer; padding: 6px 0; }
.fr-fold summary h3 { display: inline; font-size: 1.05rem; margin: 0; }

.fr-livs { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.fr-liv { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; }
.fr-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; border: 1px solid var(--rule); border-radius: 999px; padding: 0 7px; color: var(--muted); white-space: nowrap; }
.fr-current { color: var(--fg); }

.fr-cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin: 10px 0 18px; }
.fr-co { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 12px; font-size: 0.92rem; }
.fr-sws { display: flex; gap: 3px; flex: none; }
.fr-sw { width: 22px; height: 34px; border-radius: 3px; border: 1px solid var(--rule); display: inline-block; }
.fr-sw.fr-none { background: repeating-linear-gradient(45deg, var(--rule) 0 4px, transparent 4px 8px); color: var(--muted); font-size: 0.75rem; text-align: center; line-height: 34px; }

@media (max-width: 640px) {
  .fr-locos, .fr-wagons { min-width: 900px; }
  .fr-cards { grid-template-columns: 1fr; }
  .fr-map text { font-size: 17px; stroke-width: 4px; }   /* the map is drawn to its panel's width, so its labels shrink with it */
  .fr-cos, .fr-livs { grid-template-columns: 1fr; }
}