/* Unfrozen caveman CSS */

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.display-none {
    display: none;
}

/* Undone by Javascript */
.no-noscript {
    display: none;
}

.float-right {
    float: right;
}

.text-centred {
    text-align: center;
    vertical-align: middle;
}

/* not used */
.flex-centre {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contains div(s) to be horizontally centred */
.flex-evenly {
    display: flex; 
    justify-content: space-evenly;
}


fieldset.a-la-carte {
}
input[type="radio"].a-la-carte {
}
input[type="checkbox"].a-la-carte {
}



details[open] > summary {
    border: 1px solid grey;
    padding: 1px;
    border-radius: 5px;
}

details[open] > summary > .details-closed {
    display: none;
}
details:not([open]) > summary > .details-open {
    display: none;
}

.southbound .northbound {
    visibility: hidden;
}
.northbound .southbound {
    visibility: hidden;
}

/**********************************************************************/
/* .origin-destination-table                                          */
/**********************************************************************/

.origin-destination-table {
    border: 2px solid;

}
.origin-destination-table > tbody {
    font-size: 75%;
}
.origin-destination-table > thead {
    font-size: 50%;
}
.origin-destination-table > tbody > tr,
  .origin-destination-table > thead > tr {
    text-align: right;
    border: 1px solid grey;
}
.origin-destination-table > tbody > tr > td,
  .origin-destination-table > tbody > tr > th,
  .origin-destination-table > thead > tr > th {
    border: 1px solid grey;
}
.origin-destination-table > thead > tr > th {
    text-align: center;
    border: 1px solid grey;
    width: min-content;
}
.origin-destination-table > tbody > tr > th {
    text-align: right;
    border: 1px solid grey;
}
.origin-destination-table > tbody > tr:nth-child(odd) {
    background-color:#edecec;
}
.origin-destination-table > caption {
    font-weight: bold;
    font-size: 150%;
}


/**********************************************************************/
/* Generated output sections                                          */
/**********************************************************************/

#header {
}

#title {
}

.title-appendages {
    font-size: 55%;
}

.title-url {
    font-size: 50%;
}


.train-header-list {
    display: grid;
    row-gap: 1ex;
}
.train-header-list > * {
    display: grid;
    column-gap: 0.5em;
    grid-template-columns: 0.5em auto;
}


/**********************************************************************/

#graph {
}

.graphic-timetable {
    border: 2px solid black;
    padding: 5px;
}

.RESIZED-HELL {
    position: relative;
}
.RESIZER-HELL {
    position: relative;
}

/* Doing this on the row (tr) doesn't work.
   Doing this on the cell (td) doesn't work.
   Doing this on each child of the cell does.
   FUCK CSS.  FUCKING TOTAL ENDLESS NIGHTMARE.  BURN IT ALL DOWN.
*/
.graphic-timetable-row > td > *  {
    height: 70vh;
    min-height: 100px;
}
@media (max-aspect-ratio: 6/5) {
    /* Portrait format (ie phone, in This Modern World) screen */
    .graphic-timetable-row > td > *  { height: 40vh; }
}


.graphic-timetable-row > td:first-of-type { /* Station name captions */
    font-size: 50%;
    white-space: nowrap;
}

.graphic-timetable-column { /* the graph column itself  */
    /* So children may position: absolute; */
    position: relative;
    /* Space for quasi-centered hour caption overflow */
    border-left: 1em solid transparent;
    /* Ditto, also space for resize handle */
    border-right: 1em solid transparent;
}

.graphic-timetable-diagram-container {
    overflow: hidden; /* to activate resize: both */
    resize: both;
    width: calc(60vw + 1em); /* +1em to put resize handle off to the side */
    min-width: 100px;
}

.graphic-timetable-diagram {
}

#graphic-timetable-diagram {
}

.graphic-timetable-diagram-side-ui {
   float: right;
   user-select: none;
   width: 1em;
   height: 100%;
}

.graphic-timetable-footer {
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
}

.graphic-timetable-start-time-adjusters {
}

.graphic-timetable-start-time-adjusters summary {
    font-size: 75%;
}

.graphic-timetable-start-time-adjusters table {
    background-color: #F0F0F0;
    padding-left: 1em;
}

.graphic-timetable-start-time-adjusters td {
    border: 1px solid black;
    border-radius: 3px;
    padding: 1px;
    width: max-content;
}
.graphic-timetable-start-time-adjusters td input {
    float: right;
}


/* See also graphical.css */

.graph-stringline-90-ahead { /* display: none; */ }
.graph-stringline-120-ahead { /* display: none; */ stroke: none; }
.graph-stringline-180-ahead { /* display: none; */ stroke: none; }
.graph-stringline-300-ahead { display: none; }
.graph-conflict-180 { /* display: none; */ }
.graph-conflict-300 { /* display: none; */ }



/**********************************************************************/


#timetable {
}
#timetable .stopping-times-table {
    margin: auto 0.5em; /* Leave a gap between NB and SB tables */
}


.stopping-times-table {
}
.stopping-times-table > thead > tr > th {
    vertical-align: bottom;
}
.stopping-times-table > tbody > tr > td {
    font-family: monospace; /* Approved modern day <tt> replacement */
}

.stopping-times-table > thead > tr > th.deadhead > div:first-of-type {
    opacity: 50%;
}
.stopping-times-table > tbody > tr > td.deadhead {
    opacity: 50%;
    /* font-size: 75%; */
}

.stopping-times-table > thead > tr > th.external-service > div:first-of-type {
    opacity: 50%;
}
.stopping-times-table > tbody > tr > td.external-service {
    opacity: 50%;
    /* font-size: 75%; */
}


/**********************************************************************/
/* Train input form                                                   */
/**********************************************************************/


#input-form {
    border: 2px solid grey;
    padding: 5px;
    border-radius: 5px;
    background-color: #F0F0F0;
}

#input-form-form {
}

#input-form button[type="submit"] {
    font-weight: bold;
    border: 2px solid grey;
    border-radius: 5px;
    background-color: silver;
}


#form-help, #form-examples {
    border: 2px solid grey;
    padding: 5px;
    border-radius: 5px;
    background-color: #E0E0E0;
}


#example-stopping-patterns {
}

#example-stopping-patterns > table > tbody > tr > td:last-of-type {
    font-family: monospace;
}
#example-stopping-patterns > table > tbody > tr:nth-child(odd) {
    background-color:#edecec;
}


#example-timetables {
}

.example-timetables-blank-subheading {
    list-style-type: none;
}

.example-timetables-subheading {
    list-style-type: none;
    margin: 0.5em 0.5em 0.5em -1em; /* Hacky -1em left to "undo" li indent */
    font-weight: bold;
}

.example-timetables-external-link {
    font-size: smaller;
}

.example-timetables-explication {
}


.train-inputs {
}

.train-input-row td.train-input-fields {
    border: 2px solid;
    border-radius: 8px;
    margin: 4px;
}

.train-to-delete td.train-input-fields {
    vertical-align: top;
}

/* Don't want browser default janky border around this */
.train-input-row fieldset {
    border: none;
    border-style: none;
    margin: 0;
    padding: 0;
}

.train-input {
}

.train-input-fields {
}


.train-input-sequence-number {
}

.train-input-row:not(.train-to-delete) .undelete-train-button {
    display: none;
}

.train-to-delete .train-input-fields {
    opacity: 0.3;
}




.stop-input-section {
}

.stop-input-section.invalid {
    background-color: LightPink;
}

.stop-input-text-field {
}

.stop-input-section.invalid .stop-input-text-field {
   background-color: LightPink;
}

/*.stop-input-section:not(.invalid) .stop-input-text-field:focus {
    background-color: LightGreen;
}
*/

.stop-input-error-message {
    font-weight: bold;
    padding: 5px;
}

.stop-selector {
    display: flex;
    flex-flow: row wrap;
}

.stop-selector-station {
    border: 1px solid;
    border-radius: 5px;
    padding: 5px;
    margin: 2px;
}
.stop-selector-station.invalid {
    text-decoration: line-through;
}
.stop-selector-station.invalid .stop-selector-seconds::before {
    content: ": invalid ";
}
.stop-selector-station.skipping {
    background-color: LightGoldenRodYellow;
    text-decoration: line-through;
}
.stop-selector-station.stopping {
    background-color: LightGreen;
}
.stop-selector-station.stopping .stop-selector-seconds::before {
    content: ": ";
}

.stop-selector-seconds {
}

.stop-selector-dwell-menu {
}

.stop-selector-station .stop-selector-dwell-menu ~ .stop-selector-seconds {
    display: none; /* WIP OLD pull-down menu is active */
}
.stop-selector-dwell-menu + .stop-selector-station {
    display: none; /* WIP NEW pull-down menu is active, replacing us */
}




.train-import {
    font-family: monospace; 
}

.train-import-input {
    width: 100%;
    resize: both;
}

.train-import-log {
}




.train-input-ui-buttons {
    display: grid;
}




/**********************************************************************/

#fleet {
}


/**********************************************************************/

#transfers {
}

.adjacencies-table {
}

.journeys-table {
}

/**********************************************************************/

#metrics {
}

#metrics-summary {
}

.metrics-table > tbody {
}

.metrics-detail tr {
    text-align: right;
}
.metrics-sub-detail {
    border: 1px dashed grey;
}

.metricator-weight-over-5 {
    border: solid 2px #000000;
}
.metricator-weight-4-to-5 {
    border: solid 2px #24246B;
}
.metricator-weight-3-to-4 {
    border: solid 2px #333399;
}
.metricator-weight-2point5-to-3 {
    border: solid 2px #7070B8;
}
.metricator-weight-2-to-2point5 {
    border: solid 2px #ADADD6;
}
.metricator-weight-0-to-0point67 {
    color: grey;
}