/* The model viewer, shared by cargo-city.html and broke-rave-bus.html.

   These rules were written inside cargo-city.html and moved here the moment
   a second page needed them. Both pages use the same class names, so a
   change to the stage or the controls lands on both rather than on
   whichever one somebody remembered.

   The stage holds its height before the image or the canvas arrives,
   because a section that grows by five hundred pixels halfway through
   being read is worse than one that loads slowly. */
.c3-stage { position: relative; aspect-ratio: 16 / 10; background: #223038;
            border: 1px solid var(--hair-soft); border-radius: 6px; overflow: hidden; }
.c3-stage img, .c3-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%;
                                  display: block; object-fit: cover; }
.c3-stage canvas { cursor: grab; }
.c3-stage canvas:active { cursor: grabbing; }
.c3-launch { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
             display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
             background: linear-gradient(0deg, rgba(6,8,7,.86), transparent); }
.c3-go { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
         text-transform: uppercase; color: var(--void); background: var(--penny);
         border: 0; border-radius: 3px; padding: 11px 18px; cursor: pointer; }
.c3-go:hover { background: var(--cream); }
.c3-go[disabled] { opacity: .5; cursor: progress; }
.c3-bar { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.c3-bar button { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
                 text-transform: uppercase; padding: 8px 12px; border-radius: 3px;
                 border: 1px solid var(--hair-soft); background: transparent;
                 color: var(--cream-dim); cursor: pointer; }
.c3-bar button:hover { color: var(--cream); border-color: var(--cream-dim); }
.c3-bar button[aria-pressed="true"] { background: var(--penny); border-color: var(--penny);
                                      color: var(--void); }
.c3-districts button { font-size: 11px; letter-spacing: .04em; text-transform: none; }
.c3-read dt { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em;
              text-transform: uppercase; color: var(--cream-faint); }
.c3-read dd { margin: 3px 0 12px; font-size: 14px; line-height: 1.6; color: var(--cream-dim); }
@media (prefers-reduced-motion: reduce) { .c3-stage canvas { cursor: default; } }

.c3-quality { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:10px; }
.c3-quality-label { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-faint); }
.c3-quality button { font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; padding:7px 10px; min-height:36px; border:1px solid var(--hair-soft); border-radius:3px; background:transparent; color:var(--cream-dim); cursor:pointer; }
.c3-quality button:hover { color:var(--cream); border-color:var(--cream-dim); }
.c3-quality button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--void); }