/* The Safety band: three rooms drawn in isometric on isometric paper, the
   notes under each room, and the table of what happens when something breaks.
   The band stays dark in both themes. The drawing plays once when it comes
   into view (assets/js/reveal.js); without the script, or with reduced
   motion, it shows the finished picture. */

.band { background: var(--band); color: var(--band-text); }
.band .level::before { background: repeating-linear-gradient(to right, var(--band-line) 0 8px, transparent 8px 14px); }
.band a { color: var(--band-cobalt); }
.band :focus-visible { outline-color: var(--band-amber); }
.band .body p { color: var(--band-dim); }
.band + .level::before { display: none; }

.iso-wrap { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.iso { width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.swipe { display: none; }
/* on phones the drawing keeps a readable size and scrolls sideways inside its frame */
@media (max-width: 759px) {
  .iso-scroll { overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .iso { width: 50rem; max-width: none; }
  .band .swipe { display: block; margin-top: .5rem; color: var(--band-dim); }
}
.iso pattern path { stroke: var(--band-line); stroke-width: 1; fill: none; opacity: .55; }

.iso path { stroke: #5A6E9E; stroke-width: 1.2; stroke-linejoin: round; }
.slab.face-t { fill: #2B3D6B; }
.slab.face-l { fill: #121B33; }
.slab.face-r { fill: #18244A; }
.wall-l { fill: #22325A; }
.wall-r { fill: #2A3B68; }
.desk.face-t, .safe.face-t { fill: #4A5F99; }
.desk.face-l, .safe.face-l { fill: #34477A; }
.desk.face-r, .safe.face-r { fill: #2A3B68; }
.iso .screen { fill: #F3F6F5; stroke: #0C1324; }
.iso .slider { stroke: #1A2744; stroke-width: 2.5; }
.iso .knob { fill: #2447C8; }
.iso .dial { fill: none; stroke: var(--band-text); stroke-width: 2.5; }
.iso .dial-mark { stroke: var(--band-text); stroke-width: 2.5; }
.iso .post { stroke: var(--band-text); stroke-width: 5; stroke-linecap: round; }
.cash.face-t { fill: #F3F6F5; }
.cash.face-l { fill: #C9D2E3; }
.cash.face-r { fill: #A9B5CC; }
.share.face-t { fill: #A9BCFF; }
.share.face-l { fill: #7F98F0; }
.share.face-r { fill: #6580DE; }

.iso .route { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .018 .014; }
.iso .route-settings { stroke: var(--band-dim); }
.iso .route-orders { stroke: var(--band-cobalt); }
.iso-note { font-size: 19px; font-weight: 700; fill: var(--band-dim); }
.check circle { fill: #1A2744; stroke: var(--band-cobalt); stroke-width: 2.5; }
.check path { fill: none; stroke: var(--band-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ticket { transform: translate(610px, 239px); }
.ticket rect { fill: var(--band-text); stroke: var(--band-cobalt); stroke-width: 2.5; }
.ticket text { font-size: 15px; font-weight: 700; fill: #1A2744; text-anchor: middle; }
.iso .withdraw-line { fill: none; stroke: var(--band-dim); stroke-width: 3.5; stroke-dasharray: .06 .04; }
.iso .withdraw-head { fill: var(--band-dim); stroke: none; }
.withdraw text { font-size: 26px; font-weight: 800; fill: var(--band-dim); }
.withdraw .iso-note { font-size: 19px; }
.iso .withdraw-cross { stroke: var(--band-amber); stroke-width: 7; stroke-linecap: round; }

@media (prefers-reduced-motion: no-preference) {
  .js .iso .route, .js .iso .check, .js .iso .ticket, .js .iso .withdraw-cross { opacity: 0; }
  .js .iso .ticket { transform: translate(514.5px, 239px); }
  .js .iso.is-in .route-settings { animation: appear .5s ease-out .1s forwards; }
  .js .iso.is-in .route-orders { animation: appear .5s ease-out .5s forwards; }
  .js .iso.is-in .ticket { animation: ticket 3.4s ease-in-out .8s forwards; }
  .js .iso.is-in .check { transform-box: fill-box; transform-origin: center; animation: pop .35s ease-out forwards; }
  .js .iso.is-in .c1 { animation-delay: 1.9s; }
  .js .iso.is-in .c2 { animation-delay: 2.25s; }
  .js .iso.is-in .c3 { animation-delay: 2.6s; }
  .js .iso.is-in .withdraw-cross { transform-box: fill-box; transform-origin: center; animation: pop .4s ease-out 4.3s forwards; }
}
@keyframes appear { to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes ticket {
  0% { opacity: 0; transform: translate(514.5px, 239px); }
  12% { opacity: 1; }
  32%, 66% { opacity: 1; transform: translate(610px, 239px); }
  100% { opacity: 1; transform: translate(772px, 239px); }
}

/* notes under the rooms: one column per room on wide screens */
.rooms { display: grid; gap: 2rem 3rem; margin-top: 1.5rem; }
.rooms h3 { color: var(--band-text); }
.rooms p { margin-top: .5rem; color: var(--band-dim); font-size: 1rem; }
.checks { margin-top: .5rem; font-size: 1rem; color: var(--band-dim); }
.checks li { position: relative; padding-left: 1.25rem; }
.checks li + li { margin-top: .3rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5em; height: .5em; border-radius: 50%; background: var(--band-cobalt);
}
@media (min-width: 960px) { .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* what happens when something breaks */
.matrix { width: 100%; border-collapse: collapse; font-size: 1rem; }
.matrix th, .matrix td { padding: .75rem .75rem .75rem 0; text-align: left; vertical-align: top; }
.matrix thead th { color: var(--band-dim); font-weight: 600; font-size: .9375rem; border-bottom: 2px solid var(--band-text); }
.matrix tbody th { font-weight: 600; }
.matrix tbody tr { border-bottom: 1px solid var(--band-line); }
.matrix td { white-space: nowrap; }
@media (max-width: 719px) {
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrix tr, .matrix th, .matrix td { display: block; }
  .matrix tbody tr { padding-block: .75rem; }
  .matrix tbody th { padding-bottom: .35rem; }
  .matrix td { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
  .matrix td::before { content: attr(data-label); color: var(--band-dim); }
}