/* /live's showcase (showcase.js): the site's tokens (src/styles/site.css), large figures, hairlines, the
curve in cobalt, and the one warm colour only where a decision was stopped. */
.sc-intro { margin-bottom: 2.6rem; }
.sc .kicker { background: var(--tint); }

/* The Crews down the left, the one on view beside them; on a phone, one scrolling row on top. */
.sc { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3.6rem; }
.sc > * { min-width: 0; }
.sc-side { position: sticky; top: 5.6rem; align-self: start; font: .95rem/1.35 var(--sans); }
.sc-group { margin-bottom: 1.6rem; }
.sc-gk { font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 0 0 .5rem; }
.sc-side a { display: block; color: var(--muted); text-decoration: none; padding: .45rem 0 .45rem .8rem; border-left: 2px solid var(--rule); transition: color .2s, border-color .2s; }
.sc-side a:hover { color: var(--ink); }
.sc-side a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--cobalt); }

.sc-tag { font: .9375rem/1.5 var(--sans); color: var(--faint); margin: 0 0 1.4rem; max-width: 52em; }
.sc-tag b { font-weight: normal; color: var(--ink); }

/* The hero: the month's hours as the headline, three figures, then the curve. */
.sc-hero h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.08; font-weight: 600; letter-spacing: -.04em; margin: .2rem 0 1.6rem; max-width: 18em; }
.sc-role { max-width: 38em; margin: -.6rem 0 1.8rem; }
.sc-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.2rem; margin: 0 0 2.2rem; padding: 0; border: 0; }
.sc-figs > div { background: var(--stone); border-radius: var(--r-tile); padding: 18px 20px; }
.sc-figs .k { font-size: .9375rem; color: var(--muted); margin: 0; }
.sc-figs .s { font-size: .9375rem; color: var(--body); margin: 0; }
.sc-figs .v { font-size: 3em; font-weight: 600; letter-spacing: -.045em; line-height: 1; margin: .35rem 0 .45rem; font-variant-numeric: tabular-nums lining-nums; }

.sc-month { margin: 0; }
.sc-chart { display: block; width: 100%; height: auto; overflow: visible; }
.sc-base { stroke: var(--ink); stroke-width: 1; }
.sc-ms line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 5; }
.sc-ms text, .sc-mo { font: 19px var(--sans); fill: var(--muted); }
.sc-area { fill: rgba(47, 85, 212, .08); }
.sc-line { fill: none; stroke: var(--cobalt); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.sc-line[style] { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: sc-draw 1.4s cubic-bezier(.3, .7, .2, 1) .15s forwards; }
.sc-tail { fill: none; stroke: var(--cobalt); stroke-width: 1.6; stroke-dasharray: 4 5; }
.sc-dot { fill: var(--cobalt); }
.sc-dot.part { fill: var(--paper); stroke: var(--cobalt); stroke-width: 1.6; }
.sc-mark { fill: var(--paper); stroke: var(--cobalt); stroke-width: 1.4; }
.sc-val { font: 600 26px var(--sans); fill: var(--ink); }
.sc-month .note { margin-top: .4rem; }

.sc-grew { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .5rem; font: .92rem/1.45 var(--sans); }
.sc-grew li { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-top: .5rem; border-top: 1px solid var(--rule); }
.sc-grew li::before { content: none; }
.sc-when { color: var(--ink); }
.sc-grew em { font-style: normal; color: var(--muted); }

/* Today's decisions beside the mix under the rules. */
.sc-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.6rem; margin-top: 4rem; }
.sc-two h3, .sc-part h3 { font-size: 1.35em; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; margin: 0 0 .9rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.sc-two h3 span, .sc-part h3 span { font: .9rem var(--sans); color: var(--muted); margin-left: .5rem; }
.sc-feed { list-style: none; margin: 0; padding: 0; font: .97rem/1.4 var(--sans); }
.sc-feed li { display: grid; grid-template-columns: 3.6rem 1fr; gap: .8rem; padding: .62rem 0; border-bottom: 1px solid var(--rule); animation: sc-rise .5s both; animation-delay: calc(var(--i) * 90ms + .2s); }
.sc-feed time { font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-feed b { font-weight: 600; }
.sc-feed small { display: block; font-size: .9375rem; color: var(--muted); margin-top: .15rem; }

.sc-bar { display: flex; height: 14px; gap: 2px; margin: .4rem 0 1rem; }
.sc-bar i, .sc-legend i { display: block; }
.m-rule { background: var(--ink); }
.m-silence { background: #6e6c67; }
.m-approved { background: #b9b4aa; }
.m-stopped { background: #b5523b; }
.sc-legend, .sc-kinds { list-style: none; padding: 0; margin: 0 0 1rem; font: .93rem/1.4 var(--sans); }
.sc-legend li, .sc-kinds li { display: flex; align-items: center; gap: .6rem; padding: .38rem 0; border-bottom: 1px solid var(--rule); }
.sc-legend i { width: .8rem; height: .8rem; flex: none; }
.sc-legend b, .sc-kinds b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }

/* What it takes on: each unit's month, large. */
.sc-part { margin-top: 4rem; }
.sc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2.2rem; }
.sc-card { border-top: 1px solid var(--rule); padding-top: .8rem; }
.sc-card .v { font-size: 2.2em; font-weight: 600; letter-spacing: -.04em; line-height: 1; margin: .1rem 0 .5rem; font-variant-numeric: tabular-nums lining-nums; }
.sc-card .k { font: .97rem/1.4 var(--sans); color: var(--ink); margin: 0 0 .25rem; }
.sc-card .s { font: .9375rem/1.4 var(--sans); color: var(--muted); margin: 0; }

.sc-grows p { max-width: 40em; }


@keyframes sc-draw { to { stroke-dashoffset: 0; } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .sc-feed li, .sc-line[style] { animation: none; }
    .sc-line[style] { stroke-dashoffset: 0; }
}

@media (max-width: 1100px) {
    .sc-two { grid-template-columns: 1fr; gap: 2.6rem; }
    .sc-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    .sc { grid-template-columns: 1fr; gap: 1.2rem; }
    .sc-side { position: static; display: flex; flex-direction: column; gap: .4rem; }
    .sc-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem 1.1rem; margin: 0; }
    .sc-side a { padding: .55rem 0; }
    .sc-group::-webkit-scrollbar { display: none; }
    .sc-gk { flex: none; margin: 0; }
    .sc-side a { padding: .4rem 0; border-left: 0; border-bottom: 2px solid transparent; }
    .sc-side a[aria-current] { border-bottom-color: var(--ink); }
}
@media (max-width: 600px) {
    .sc-hero h2 { font-size: 1.85em; }
    .sc-figs { grid-template-columns: 1fr; gap: 1rem; }
    .sc-figs .v { font-size: 2.4em; }
    .sc-cards { grid-template-columns: 1fr; }
    .sc-kinds { grid-template-columns: 1fr; }
    .sc-grew li { grid-template-columns: 1fr; gap: .1rem; }
    .sc-ms text, .sc-mo { font-size: 30px; }
    .sc .kicker { border-radius: 14px; }
    .sc-pm { display: none; }
    .sc-val { display: none; }
}
@media (max-width: 420px) { .sc-ms text, .sc-mo { font-size: 40px; } }