/* The tour, cut from the home page's styles by pages.py. Edit page.tpl.html, not this file. */
.film { padding: 0; }
.film-head { padding-block: 96px 28px; padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
.film-head .sub { max-width: 680px; }
.film-track { position: relative; height: calc(100svh + 4 * 62svh); }
.film-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #000; }
.film-pin canvas.gl, .film-pin canvas.footage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .6s var(--ease); }
.film-pin canvas.footage { opacity: 0; pointer-events: none; }
.film-pin.connecting canvas.gl { opacity: .35; }
.flabels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.flabel { position: absolute; left: 0; top: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% - 44px)); padding: 8px 11px; border-radius: 4px; background: #000; border: 1px solid var(--line); font-size: 12px; color: var(--gray-300); white-space: nowrap; opacity: 0; transition: opacity .5s var(--ease); }
.flabel b { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--white); font-variant-numeric: tabular-nums; }
.flabel.live b, .flabel.hot b { color: var(--signal); }
.flabel.hot { border-color: rgba(47, 180, 255, .6); }
.flabel::after { content: ""; position: absolute; left: calc(50% - var(--dx, 0px)); top: 100%; width: 1px; height: 44px; background: rgba(245, 245, 243, .45); }
.flabel::before { content: ""; position: absolute; left: calc(50% - 3px - var(--dx, 0px)); top: calc(100% + 41px); width: 7px; height: 7px; border-radius: 50%; background: var(--white); }
.flabel.hot::after, .flabel.hot::before { background: var(--signal); }
.flabel.on { opacity: 1; }
.flabel.below { transform: translate(calc(-50% + var(--dx, 0px)), 44px); }
.flabel.below::after { top: auto; bottom: 100%; }
.flabel.below::before { top: auto; bottom: calc(100% + 41px); }
.film-top { position: absolute; z-index: 3; top: 92px; left: max(var(--gut), env(safe-area-inset-left, 0px)); right: max(var(--gut), env(safe-area-inset-right, 0px)); display: grid; gap: 12px; justify-items: start; pointer-events: none; }
.film-top > * { pointer-events: auto; }
.ftabs { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ftabs::-webkit-scrollbar { display: none; }
.ftabs button { font: 13.5px var(--sans); color: var(--gray-300); background: #000; border: 1px solid var(--line); border-radius: 4px; padding: 7px 10px; cursor: pointer; white-space: nowrap; }
.ftabs button:hover { color: var(--white); border-color: rgba(245, 245, 243, .5); }
.ftabs button[aria-selected="true"] { color: #000; background: var(--white); border-color: var(--white); }
.ftab-more { flex: none; order: 2; margin-left: 6px; font-size: 13.5px; color: var(--gray-300); text-underline-offset: 3px; white-space: nowrap; }
.fcard { width: 470px; max-width: 100%; padding: 18px 20px 20px; border-radius: 6px; background: #000; border: 1px solid var(--line); display: grid; gap: 12px; }
.fc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fc-time { font-size: 14px; color: var(--white); font-variant-numeric: tabular-nums; }
.fc-skip { font-size: 13px; color: var(--gray-500); text-underline-offset: 3px; }
.fc-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fc-bar span { display: grid; gap: 6px; }
.fc-bar i { position: relative; height: 2px; overflow: hidden; background: rgba(255, 255, 255, .16); }
.fc-bar i b { position: absolute; inset: 0; background: var(--white); transform-origin: 0 50%; transform: scaleX(0); }
.fc-bar em { font-style: normal; font-size: 11.5px; color: var(--gray-500); }
.fc-bar span.on em { color: var(--white); }
.fc-body, .fc-data { transition: opacity .3s var(--ease), transform .3s var(--ease); }
.fc-body.swap, .fc-data.swap { opacity: 0; transform: translateY(6px); }
.fcard h3 { font-size: 24px; line-height: 1.12; letter-spacing: -0.025em; }
.fcard p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--gray-300); }
.fc-data { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; color: var(--gray-500); min-height: 62px; }
.fc-data b { display: block; margin-bottom: 2px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--white); font-variant-numeric: tabular-nums; }
.fc-data b.live { color: var(--signal); }
.fc-ins { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.fc-ins span { padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px; font-size: 12.5px; color: var(--white); }
.fc-ins em { display: block; font-style: normal; color: var(--gray-500); }
.fc-meter { width: 100%; height: 2px; background: rgba(255, 255, 255, .14); }
.fc-meter i { display: block; width: 0; height: 100%; background: var(--white); }
.fc-chart { width: 100%; height: auto; overflow: visible; }
.fc-chart text { font-size: 13px; fill: var(--gray-500); }
.fc-plan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; width: 100%; margin: 0; font-size: 13.5px; }
.fc-plan dt { color: var(--gray-500); }
.fc-plan dd { margin: 0; color: var(--white); }
.fc-approve { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.fc-approve .btn { height: 40px; font-size: 14.5px; padding: 0 16px; }
.fc-sim { width: 100%; margin: 0; font-size: 13px !important; color: var(--gray-300); }
.fc-acts { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.fc-acts li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px; font-size: 13.5px; color: var(--white); opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.fc-acts li span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--signal); white-space: nowrap; }
.fc-acts li span svg { width: 13px; height: 13px; }
.fc-acts li span .lg { --s: 17.33px; }
.fc-data.undone .fc-acts li span svg, .fc-data.undone .fc-acts li span .lg { filter: grayscale(1) brightness(.6); }
.fc-acts li.on { opacity: 1; transform: none; }
.fc-data.undone .fc-acts li { color: var(--gray-500); text-decoration: line-through; }
.fc-data.undone .fc-acts li span { color: var(--gray-500); }
.fc-ways { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.fc-ways em { flex-basis: 100%; font-style: normal; font-size: 12.5px; color: var(--gray-300); margin-bottom: 2px; }
.fc-ways span { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 4px; font-size: 12.5px; color: var(--gray-500); }
.fc-ways span.on { color: var(--white); border-color: rgba(245, 245, 243, .7); }
.fconnect { position: absolute; z-index: 2; top: 150px; bottom: 90px; left: calc(max(var(--gut), env(safe-area-inset-left, 0px)) + 510px); right: max(var(--gut), env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: minmax(0, 220px) 150px minmax(0, 220px); justify-content: center; align-content: center; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.film-pin.connecting .fconnect { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.fc-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fc-wires path { fill: none; stroke: rgba(245, 245, 243, .2); stroke-width: 1; transition: stroke .5s var(--ease); }
.fc-wires path.on { stroke: var(--signal); }
.fc-hub { grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: center; position: relative; width: 76px; height: 76px; display: grid; place-items: center; background: #000; border: 1px solid var(--line); border-radius: 8px; }
.fc-hub svg { width: 40px; height: 40px; }
.fc-chips { display: contents; }
.fchip { grid-column: var(--c); grid-row: var(--r); position: relative; display: flex; align-items: center; gap: 8px; margin: 7px 0; padding: 9px 11px; min-width: 0; border-radius: 4px; background: #000; border: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: var(--gray-500); transition: color .4s var(--ease), border-color .4s var(--ease); }
.fchip em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip svg { width: 16px; height: 16px; flex: none; }
.fchip .lg { --s: 21.33px; }
.fchip svg, .fchip .lg { filter: grayscale(1) brightness(.55); transition: filter .4s var(--ease); }
.fchip.on { color: var(--white); border-color: rgba(47, 180, 255, .7); }
.fchip.on svg, .fchip.on .lg { filter: none; }
.film-note { position: absolute; z-index: 3; left: max(var(--gut), env(safe-area-inset-left, 0px)); bottom: 24px; max-width: 560px; font-size: 13px; color: var(--gray-500); }
@media (max-width: 1100px) {
  .fconnect { grid-template-columns: minmax(0, 180px) 110px minmax(0, 180px); }
}
@media (max-width: 760px) {
  .film-head { padding-block: 68px 20px; }
  .film-top { top: 82px; left: 12px; right: 12px; gap: 8px; justify-items: stretch; }
  .ftabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px; scrollbar-width: none; }
  .ftabs::-webkit-scrollbar { display: none; }
  .ftabs button { flex: none; padding: 7px 10px; font-size: 13px; }
  .fcard { width: auto; padding: 13px 14px 14px; gap: 9px; }
  .fcard h3 { font-size: 19px; }
  .fcard p { margin-top: 5px; font-size: 13.5px; }
  .fc-bar em { font-size: 10.5px; }
  .fc-chart text { font-size: 15px; }
  .fc-data { min-height: 0; gap: 8px 16px; padding-top: 9px; }
  .fc-data b { font-size: 16px; }
  .fc-ins span { padding: 5px 7px; font-size: 11.5px; }
  .fc-plan { font-size: 12.5px; gap: 3px 10px; }
  .fc-approve .btn { height: 38px; }
  .fc-acts li { padding: 6px 8px; font-size: 12.5px; }
  .fconnect { top: calc(var(--card-bottom, 380px) + 18px); bottom: 64px; left: 12px; right: 12px; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .fc-hub { grid-column: 1 / span 2; grid-row: 1; width: 52px; height: 52px; margin-bottom: 26px; }
  .fc-hub svg { width: 28px; height: 28px; }
  .fchip { grid-column: auto; grid-row: auto; margin: 4px 0; padding: 7px 8px; font-size: 11.5px; }
  .film-note { left: 12px; right: 12px; bottom: 60px; font-size: 11.5px; }
  .flabel { padding: 6px 8px; font-size: 11px; }
  .flabel b { font-size: 13px; }
}
/* On an industry page the tab row links to the other industries. */
.ftabs a.it { flex: none; font-size: 13.5px; color: var(--gray-300); background: #000; border: 1px solid var(--line); border-radius: 4px; padding: 7px 10px; white-space: nowrap; text-decoration: none; }
.ftabs a.it:hover { color: var(--white); border-color: rgba(245, 245, 243, .5); }
.ftabs a.it[aria-current="page"] { color: #000; background: var(--white); border-color: var(--white); }
@media (max-width: 760px) { .ftabs a.it { font-size: 13px; } }