/* The rate sheet: the picker, the line of towns, the chart (public), and the office grid. Base rules first,
   media queries last. Big type throughout: most of the people reading this are reading without their glasses. */

/* ---- the picker ---------------------------------------------------------------------------------------- */
.fp { display: grid; gap: .9rem; }
.fp-h { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.fp-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; align-items: end; }
.fp-field { display: grid; gap: .3rem; min-width: 0; }
.fp-field > span { font-size: 1.15rem; font-weight: 700; }
.fp-field .select { font-size: 1.25rem; font-weight: 700; }
.fp-swap { justify-self: center; border: 2px solid var(--color-base-300); }
.fp-answer { display: grid; gap: .1rem; padding: 1rem 1.1rem; border-radius: var(--radius-box);
             background: color-mix(in oklab, var(--color-primary) 9%, var(--color-base-100));
             border: 2px solid color-mix(in oklab, var(--color-primary) 35%, transparent); }
.fp-say { font-size: 1.2rem; font-weight: 700; }
.fp-price { font-size: 3.25rem; font-weight: 900; line-height: 1.05; letter-spacing: -.01em; }
.fp-big .fp-price { font-size: 4.5rem; }
.fp-sub { font-size: 1.1rem; }
.fp-flash { animation: fp-flash .45s ease-out; }
@keyframes fp-flash { from { opacity: .25; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- the prices page --------------------------------------------------------------------------------- */
.fl-layout { display: grid; gap: 1.25rem; align-items: start; }
.fl-layout > * { min-width: 0; }
.fl-card { display: grid; gap: .75rem; padding: 1.25rem; border-radius: var(--radius-box); background: var(--color-base-100);
           border: 2px solid var(--color-base-300); min-width: 0; }
.fl-pick { border-color: var(--color-primary); }
.fl-end { font-size: .95rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .65; padding-left: 2.6rem; }

/* The line: the towns in their order along I-90, joined like stops on a route sign, with each price at the
   end of a dotted leader the way a menu or an old timetable lines a figure up with its name. */
.fl-line { list-style: none; margin: 0; padding: 0; position: relative; }
.fl-line::before { content: ""; position: absolute; left: 1.05rem; top: 1.4rem; bottom: 1.4rem; width: 6px; border-radius: 3px;
                   background: var(--color-base-300); }
.fl-stop button { display: grid; grid-template-columns: 2.2rem auto minmax(1rem, 1fr) auto; align-items: center; gap: .55rem;
                  width: 100%; padding: .7rem .5rem .7rem .1rem; border-radius: .6rem; text-align: left; cursor: pointer;
                  background: none; border: 0; color: inherit; font: inherit; position: relative; }
.fl-stop button:hover { background: var(--color-base-200); }
.fl-stop button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.fl-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; justify-self: center; background: var(--color-base-100);
          border: 5px solid var(--color-base-content); position: relative; z-index: 1; }
.fl-town { font-size: 1.35rem; font-weight: 700; display: flex; flex-direction: column; line-height: 1.15; }
.fl-town small { font-size: .95rem; font-weight: 700; opacity: .7; }
.fl-town small:empty { display: none; }
.fl-lead { border-bottom: 3px dotted color-mix(in oklab, var(--color-base-content) 35%, transparent); align-self: center;
           margin-top: .5rem; min-width: 1rem; }
.fl-price { font-size: 1.75rem; font-weight: 900; white-space: nowrap; }
.fl-stop.is-here .fl-dot { background: var(--color-primary); border-color: var(--color-primary);
                           box-shadow: 0 0 0 5px color-mix(in oklab, var(--color-primary) 25%, transparent); }
.fl-stop.is-here .fl-town { color: var(--color-primary); }
.fl-stop.is-picked button { background: color-mix(in oklab, var(--color-primary) 10%, transparent); }
.fl-stop.is-picked .fl-dot { border-color: var(--color-primary); }

/* The chart: a road map's mileage chart, with prices. */
.fl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fl-chart { border-collapse: collapse; min-width: 100%; font-size: 1.2rem; }
.fl-chart th, .fl-chart td { border: 2px solid var(--color-base-300); padding: .55rem .6rem; text-align: center; }
.fl-chart thead th { font-size: 1rem; font-weight: 800; vertical-align: bottom; line-height: 1.15; min-width: 4.6rem; }
.fl-chart tbody th { text-align: left; font-weight: 800; white-space: nowrap; position: sticky; left: 0; z-index: 1;
                     background: var(--color-base-100); }
.fl-chart td { font-weight: 800; font-variant-numeric: tabular-nums; }
.fl-chart td.is-self { background: var(--color-base-200); }
.fl-chart tbody tr:nth-child(even) td:not(.is-self) { background: color-mix(in oklab, var(--color-base-200) 45%, transparent); }

.fl-rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.fl-rules li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .6rem; font-size: 1.2rem; align-items: start; }
.fl-rules li i { font-size: 1.6rem; line-height: 1.2; }
.fl-plain > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .75rem 0;
                  border-bottom: 2px solid var(--color-base-200); align-items: baseline; }
.fl-plain dt { font-size: 1.2rem; font-weight: 700; display: grid; }
.fl-plain dt small { font-weight: 400; opacity: .75; font-size: .95rem; }
.fl-plain dd { font-size: 1.7rem; font-weight: 800; white-space: nowrap; }
.fl-plain dd small { font-size: .95rem; opacity: .75; }
.fl-print-head { display: none; }

/* ---- the office grid -------------------------------------------------------------------------------- */
.fs-bar { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.fs-seg { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: var(--radius-field); background: var(--color-base-200); }
.fs-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .95rem; }
.fs-dot { display: inline-block; width: .85rem; height: .85rem; border-radius: 50%; vertical-align: -.1rem; }
.fs-scroll { overflow-x: auto; }
.fs-grid { border-collapse: separate; border-spacing: 3px; min-width: 100%; }
.fs-grid thead th { font-size: .85rem; font-weight: 800; text-align: center; vertical-align: bottom; padding: .2rem; min-width: 5.3rem; }
.fs-grid tbody th { text-align: left; font-weight: 800; white-space: nowrap; padding-right: .5rem; }
.fs-cell { padding: .4rem; border-radius: .55rem; border: 2px solid transparent; vertical-align: top; }
.fs-in { display: flex; align-items: center; gap: .2rem; font-weight: 800; }
.fs-in .input { width: 3.7rem; padding-inline: .4rem; font-weight: 800; font-size: 1rem; text-align: right; }
.fs-cost, .fs-left { display: block; font-size: .78rem; line-height: 1.25; margin-top: .2rem; }
.fs-left { font-weight: 800; }
.fs-good, .fs-dot.fs-good { background: color-mix(in oklab, var(--color-success) 16%, transparent); }
.fs-thin, .fs-dot.fs-thin { background: color-mix(in oklab, var(--color-warning) 22%, transparent); }
.fs-loses, .fs-dot.fs-loses { background: color-mix(in oklab, var(--color-error) 18%, transparent); }
.fs-dot.fs-good { background: var(--color-success); }
.fs-dot.fs-thin { background: var(--color-warning); }
.fs-dot.fs-loses { background: var(--color-error); }
.fs-self { border-color: var(--color-base-300); }
.fs-empty { background: none; }
.fs-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .4rem; }
.fs-ladder > div { padding: .5rem .6rem; border-radius: .5rem; background: var(--color-base-200); }
.fs-ladder dt { font-size: .85rem; }
.fs-ladder dd { font-size: 1.3rem; font-weight: 800; }

@media (min-width: 560px) {
    .fp-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .fp-swap { margin-bottom: .15rem; }
}
@media (min-width: 900px) {
    .fl-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .fl-card { padding: 1.5rem; }
}
/* In a narrow column (the home page's side card) the two towns stack even on a wide screen. */
@media (min-width: 900px) {
    .hq-card .fp-row { grid-template-columns: minmax(0, 1fr); }
    .hq-card .fp-swap { justify-self: start; }
}
@media (min-width: 1100px) {
    .hq-card .fp-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}

/* Printed from the browser (Ctrl+P): the chart alone on one landscape page, with the logo, the phone and a QR
   back to this page. The Print buttons give the full poster as a PDF instead. */
@media print {
    @page { size: letter landscape; margin: 0.4in; }
    header, footer, .fl-noprint, .fl-layout, .fl-rules, noscript, #main > section > h1 + p { display: none !important; }
    #main > section { padding: 0 !important; max-width: none !important; }
    .fl-print-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                     padding-bottom: .4rem; margin-bottom: .5rem; border-bottom: 3px solid #111; }
    .fl-print-brand { display: grid; gap: .1rem; font-weight: 800; }
    .fl-print-brand img { width: 2.3in; height: auto; margin-bottom: .25rem; }
    .fl-print-brand span { font-size: 11pt; }
    .fl-print-brand strong { font-size: 15pt; }
    /* The van's artwork, with this page's QR set into its frame (the frame's opening, as shares of the art). */
    .fl-print-art { position: relative; width: 3.6in; line-height: 0; }
    .fl-print-art img:first-child { width: 100%; height: auto; }
    .fl-print-qr { position: absolute; left: 71.6%; top: 24%; width: 21.5%; height: auto; }
    .fl-card { border: 0; padding: 0; margin: 0 !important; }
    .fl-scroll { overflow: visible; }
    .fl-chart { width: 100%; font-size: 15pt; }
    .fl-chart th, .fl-chart td { border-color: #888; padding: .3rem .35rem; }
    .fl-chart thead th { font-size: 10pt; min-width: 0; }
    .fl-chart tbody th { position: static; }
}