/* The wordmark is solid black artwork, so an <img> can't take the page's color the way
   inline SVG would. Inverting it is exact for pure black and costs nothing.
   Base rules first, media queries last (scripts/check_cascade.py). */

.brand-invert { filter: invert(1); }            /* always on a dark bar */
.brand-auto { filter: none; }                   /* follows the theme, see below */

[data-theme="clear-dark"] .brand-auto { filter: invert(1); }

/* The wordmark is an arch with DELIVERY centered under it — a symmetrical lockup, so
   anything sitting directly beneath it belongs to that lockup. Set flush left, a tagline
   lands a few pixels off the arch's first letter and a long way off its last: near enough
   to alignment to read as a mistake rather than as a choice. Centered on the mark, both
   edges are deliberate. One line, always — a tagline allowed to wrap makes the header two
   lines taller and strands the mark above a paragraph. */
.brand-lockup { display: inline-flex; flex-direction: column; align-items: center;
                min-width: 0; max-width: 100%; }
.brand-say { margin-top: .2rem; text-align: center; font-size: .95rem; max-width: 100%;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sizes the prebuilt app.css doesn't include. Named rather than arbitrary so the class
   checker can see them and so they mean something. */
.brand-mark { width: auto; }
.brand-sm { height: 1.5rem; }
.brand-md { height: 2.25rem; }
.brand-lg { height: 2.25rem; }
.lede-wide { max-width: 52ch; }
.lede-prose { max-width: 62ch; }
.lede-head { max-width: 20ch; }
.lede-close { max-width: 28ch; }
.hero-line { line-height: 1.05; }
.pad-tall { padding-top: 3rem; padding-bottom: 3rem; }

@media (min-width: 40rem) {
    .brand-lg { height: 2.75rem; }
}

/* ---------- the run timetable ----------
 * Shown on the landing page and on Where we go. A list, not a table: four columns on a
 * 375px phone is a horizontal scrollbar, and the phone is where this gets read.
 */
.rt { border-block: 2px solid var(--color-base-300); }
/* Phones stack, every row the same way. Letting them wrap only when they had to gave a
   ragged list where Superior broke and Alberton did not, which reads as broken rather
   than as a layout. */
.rt-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem;
          padding: .85rem 0; }
.rt-row + .rt-row { border-top: 2px solid var(--color-base-200); }
.rt-town { font-size: 1.2rem; font-weight: 700; flex: 1 1 100%; min-width: 0; }
/* Two columns, label over value. Inline labels wrapped mid-word ("PICK-" / "UPS") the
   moment a town name or a time ran long, which is most of them. */
.rt-times { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem; flex: 1 1 100%; }
.rt-time { display: grid; gap: .05rem; font-size: 1.05rem; font-weight: 700;
           font-variant-numeric: tabular-nums; }
.rt-when { font-size: .68rem; font-weight: 600; text-transform: uppercase;
           letter-spacing: .06em; opacity: .6; white-space: nowrap; }
/* Where the van parks, on the Where we go page. One line under the times, not a column:
   a fourth column is what made this table scroll sideways on a phone. */
.rt-meet { flex: 1 1 100%; font-size: .95rem; line-height: 1.35; opacity: .85; }
.rt-meet-name { font-weight: 700; opacity: 1; }
.rt-meet-none { opacity: .6; }
.rt-ask .rt-town { font-weight: 600; opacity: .75; }
.rt-ask-say { font-size: .95rem; opacity: .6; flex: none; margin-left: auto; }
.rt-ask .rt-town { flex: 0 1 auto; }

/* ---------- the route map ----------
 * One SVG serves both sizes. On a phone the whole 1000-unit frame is squeezed into about
 * 360 CSS pixels, so the town names are stepped up to stay legible; app/routemap.py
 * reserves space at PHONE_NAME for exactly this, so the two numbers move together.
 */
@media (max-width: 39.99rem) {
    .route-map .rm-name { font-size: 48px; }
}

@media (min-width: 40rem) {
    .rt-town { flex: 1 1 auto; }
    .rt-times { flex: none; gap: 2rem; }
    .rt-time { display: grid; gap: .1rem; text-align: right; min-width: 7rem;
               font-size: 1.1rem; }
}