/* Sunicorn at work (/live): the site's paper and ink, wider than the text pages. */
.lv-body main { max-width: 1160px; }
.lv-on .lv-static-h { display: none; }
.lv-on > .kicker { margin-bottom: 1.4rem; }

.lv-k { font: .62rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.lv-note { font: .74rem/1.5 var(--sans); color: var(--muted); margin: .4rem 0 0; }

.lv-scale { font: .76rem/1.4 var(--sans); border: 1px dashed var(--ink); padding: .55rem .75rem; margin: 0 0 1.4rem; }

/* The top band: the clock, the line, the fleet's totals. */
.lv-top { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.4rem; align-items: start; padding-bottom: 1.6rem; border-bottom: 1px solid var(--ink); }
.lv-time { font-size: 4.4em; line-height: .95; margin: 0 0 .5rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lv-date { font: .8rem/1.4 var(--sans); color: var(--muted); margin: 0; }
.lv-aha { font-size: 2.15em; font-weight: normal; line-height: 1.15; margin: 0 0 1.3rem; }
.lv-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.4rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.lv-total .k { font: .62rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .3rem; }
.lv-total .v { font-size: 1.6em; line-height: 1.1; margin: 0 0 .25rem; font-variant-numeric: tabular-nums; }
.lv-total .s { font: .72rem/1.4 var(--sans); color: var(--muted); margin: 0; }
.lv-dating { font: .74rem/1.5 var(--sans); color: var(--muted); margin: 1.1rem 0 0; max-width: 52em; }

.lv-bar { display: flex; justify-content: flex-end; gap: .5rem; margin: 1rem 0 .4rem; }
.lv-ctl { font: .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: .65rem .9rem; min-height: 38px; background: transparent; color: var(--ink); border: 1px solid var(--rule); cursor: pointer; }
.lv-ctl:hover { border-color: var(--ink); }
.lv-wall { border-color: var(--ink); }

/* The rows. */

.lv-list { list-style: none; margin: 0; padding: 0; }
.lv-row {
    display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, .8fr) minmax(0, .7fr) minmax(0, 1.15fr) minmax(0, 1.25fr);
    gap: .35rem 1.2rem; align-items: center; width: 100%; padding: .9rem 0 .8rem;
    background: none; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.lv-item .lv-row:hover { background: rgba(20, 20, 20, .025); }
.lv-item.open .lv-row { border-bottom-color: transparent; }
.lv-cols { cursor: default; padding: 0 0 .5rem; border-bottom: 1px solid var(--ink); }
.lv-colk { font: .6rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lv-crew { min-width: 0; }
.lv-name { display: block; font-size: 1.12em; line-height: 1.25; margin-bottom: .25rem; }
.lv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.lv-badge { font: .58rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: .28rem .4rem; border: 1px solid var(--ink); }
.lv-live { background: var(--ink); color: var(--paper); }
.lv-build { border-style: dashed; }
.lv-since { font: .7rem/1.3 var(--sans); color: var(--muted); }
.lv-cell { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.lv-cellk { display: none; }
.lv-v { font-size: 1.15em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-sub { font: .66rem/1.35 var(--sans); color: var(--muted); }
.lv-flag { align-self: flex-start; font: .58rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: .25rem .35rem; border: 1px solid var(--ink); }
.lv-spark { display: block; overflow: visible; }
.lv-spark-area { fill: rgba(20, 20, 20, .06); }
.lv-spark-line { stroke: var(--ink); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.lv-spark-now { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.lv-spark-dot { fill: var(--ink); }
.lv-ticks { display: flex; justify-content: space-between; font: .55rem/1 var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; }
.lv-latest { grid-column: 1 / -1; font: .72rem/1.4 var(--sans); color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A Crew's detail, opened under its row. */
.lv-detail { border-bottom: 1px solid var(--rule); padding: .4rem 0 1.4rem; }
.lv-dgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.6rem 2.2rem; }
.lv-role { margin: 0 0 1rem; font-size: .95em; color: var(--body); }
.lv-fig { margin: 0 0 1.4rem; }
.lv-chart { display: block; max-width: 30rem; overflow: visible; }
.lv-barr { fill: var(--ink); }
.lv-axis { stroke: var(--rule); stroke-width: 1; }
.lv-chart-v { font: 10px var(--sans); fill: var(--ink); font-variant-numeric: tabular-nums; }
.lv-chart-k { font: 9px var(--sans); fill: var(--muted); }
.lv-pipe-a { stroke: var(--ink); stroke-width: 1.6; }
.lv-pipe-b { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.lv-legend { display: flex; gap: 1.2rem; font: .7rem/1.3 var(--sans); color: var(--muted); margin: .4rem 0 0; }
.lv-legend span::before { content: ""; display: inline-block; width: 1.4em; height: 0; border-top: 1.6px solid var(--ink); margin-right: .4em; vertical-align: .3em; }
.lv-legend .lv-lg-b::before { border-top: 1.2px dashed var(--ink); }
.lv-out { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.lv-outn .v { font-size: 1.35em; line-height: 1.1; margin: 0 0 .2rem; font-variant-numeric: tabular-nums; }
.lv-outn .k { font: .64rem/1.35 var(--sans); color: var(--muted); margin: 0 0 .35rem; min-height: 2.7em; }
.lv-outbar { display: block; height: 2px; background: var(--rule); }
.lv-outbar span { display: block; height: 100%; background: var(--ink); }

/* The last 24 hours: one row per Crew, one square per hour, then what each did. */
.lv-day { margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--ink); }
.lv-dayh { font-size: 1.3em; font-weight: normal; line-height: 1.25; margin: 0 0 .3rem; }
.lv-daynote { margin: 0 0 1.2rem; max-width: 48em; }
.lv-strip { position: relative; --lab: 11rem; --gap: .9rem; --axis: 1.35rem; }
.lv-sgrid { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); column-gap: var(--gap); row-gap: 3px; align-items: center; }
.lv-slab { font: .6rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-scells { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 1.75rem; }
.lv-sq { display: block; min-width: 0; }
.lv-sq-0 { box-shadow: inset 0 0 0 1px var(--rule); }
.lv-saxis { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: var(--axis); align-items: end; }
.lv-stick { font: .58rem/1 var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-stick-now { text-align: right; justify-self: end; color: var(--ink); letter-spacing: .06em; text-transform: uppercase; }
.lv-shours { position: absolute; left: calc(var(--lab) + var(--gap)); right: 0; top: 0; bottom: var(--axis); display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.lv-sh { display: block; min-width: 0; padding: 0; background: transparent; border: 0; cursor: pointer; }
.lv-sh:hover, .lv-sh.on { box-shadow: 0 0 0 1.5px var(--ink); }
.lv-sh:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lv-strip-big { --lab: 0px; --gap: 0px; margin: .2rem 0 1rem; }
.lv-strip-big .lv-scells { height: 2.6rem; }

.lv-hp { margin-top: 1.1rem; padding: .9rem 0 0; border-top: 1px solid var(--rule); min-height: 7.5rem; }
.lv-hpt { font-size: 1.05em; margin: 0 0 .7rem; font-variant-numeric: tabular-nums; }
.lv-hpg { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem 1.8rem; }
.lv-hpc { min-width: 0; }
.lv-hpc ul { list-style: none; margin: 0; padding: 0; font: .76rem/1.5 var(--sans); color: var(--body); }
.lv-hpn { font: .74rem/1.45 var(--sans); color: var(--faint); margin: 0; }
.lv-hpq { margin-top: .9rem; }
.lv-tag { font: .58rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .3rem; }

.lv-sums { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.6rem 2.4rem; margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
.lv-sum { min-width: 0; }
.lv-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .9rem 1.1rem; margin-top: .4rem; }
.lv-st { min-width: 0; }
.lv-st .v { font-size: 1.55em; line-height: 1.05; margin: 0 0 .25rem; font-variant-numeric: tabular-nums; }
.lv-st .k { font: .68rem/1.35 var(--sans); color: var(--muted); margin: 0; }
.lv-more { grid-column: 1 / -1; font: .72rem/1.4 var(--sans); color: var(--muted); margin: 0; }
.lv-barr-today { fill: var(--faint); }

.lv-row:focus-visible, .lv-ctl:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 860px) {
    .lv-top { grid-template-columns: 1fr; gap: 1.2rem; }
    .lv-time { font-size: 3.4em; }
    .lv-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lv-cols { display: none; }
    .lv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem 1rem; padding: 1rem 0; }
    .lv-crew, .lv-act { grid-column: 1 / -1; }
    .lv-cellk { display: block; font: .58rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
    .lv-latest { white-space: normal; }
    .lv-dgrid { grid-template-columns: 1fr; }
    .lv-out { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lv-strip { --lab: 7rem; --gap: .6rem; }
    .lv-stick-odd { visibility: hidden; }
}
@media (max-width: 420px) {
    .lv-aha { font-size: 1.7em; }
    .lv-strip { --lab: 5.4rem; --gap: .45rem; }
    .lv-scells { gap: 1px; height: 1.5rem; }
    .lv-saxis, .lv-shours { gap: 1px; }
    .lv-slab { font-size: .52rem; letter-spacing: .06em; }
    .lv-sums { grid-template-columns: minmax(0, 1fr); }
    .lv-hpg { grid-template-columns: minmax(0, 1fr); }
    .lv-bar { justify-content: flex-start; flex-wrap: wrap; }
    .lv-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}