/* Work Like a Physicist deck: diagram classes and the hero plot card from the
   Year 9 companion site (gcsephy/year9phy/unit01/assets/styles.css). */

.wf { font-family: Arial, Helvetica, sans-serif; }
.wf text { fill: var(--ink); stroke: none; }
.wf .ink { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: round; }
.wf .ink.thin { stroke-width: 2; }
.wf .axis { stroke: var(--ink); stroke-width: 4; fill: none; stroke-linecap: square; }
.wf .grid { stroke: rgba(7, 22, 47, .1); stroke-width: 1.5; }
.wf .floor { stroke: var(--ink); stroke-width: 4; }
.wf .box { stroke: var(--ink); stroke-width: 3; }
.wf .box.pop { filter: drop-shadow(7px 7px 0 var(--ink)); }
.wf .f-accent { fill: var(--accent); }
.wf .f-hi { fill: var(--hi); }
.wf .f-cyan { fill: var(--cyan); }
.wf .f-alt { fill: var(--alt); }
.wf .f-card { fill: var(--card); }
.wf .f-paper { fill: var(--paper); }
.wf .f-muted { fill: #d4d8de; }
.wf .ring { stroke: var(--ink); stroke-width: 3; }
.wf .pt { fill: var(--hi); stroke: var(--ink); stroke-width: 4; }
.wf .pt.set-a { fill: #c9ee49; }
.wf .pt.set-b { fill: #ff795e; }
.wf .pt.set-c { fill: #42cbe8; }
.wf text.set-a-t { fill: #527600; }
.wf text.set-b-t { fill: #b9341c; }
.wf text.set-c-t { fill: #086988; }
.wf .hit { fill: var(--hot); stroke: var(--ink); stroke-width: 3; }
.wf .cross { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; fill: none; }
.wf .trend { stroke: var(--cyan); stroke-width: 6; fill: none; stroke-linecap: round; }
.wf .trend.dash { stroke-width: 4; stroke-dasharray: 10 9; }
.wf .zigzag { stroke: var(--hot); stroke-width: 5; fill: none; stroke-linejoin: round; }
.wf .guide { stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 8 7; fill: none; }
.wf .band { fill: var(--cyan); opacity: .25; stroke: var(--cyan); stroke-width: 2; }
.wf .mean-line { stroke: var(--ink); stroke-width: 4; }
.wf .bracket { stroke: var(--ink); stroke-width: 3; fill: none; }
.wf .arrow { stroke: var(--ink); stroke-width: 3.5; fill: none; stroke-linecap: round; }
.wf .head { fill: var(--ink); stroke: none; }
.wf .arrow.thick { stroke-width: 5; }
.wf .arrow.cyan { stroke: #1479a8; }
.wf .head.cyan { fill: #1479a8; }
.wf .arrow.hot { stroke: #c2410c; }
.wf .head.hot { fill: #c2410c; }
.wf .arrow.dash-arrow { stroke-dasharray: 7 7; }
.wf .out-ring { fill: none; stroke: var(--hot); stroke-width: 5; }
.wf .yes-mark { stroke: var(--right); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wf .no-mark { stroke: var(--wrong); stroke-width: 6; fill: none; stroke-linecap: round; }
.wf .ruler { fill: #f3e2b3; stroke: var(--ink); stroke-width: 3; }
.wf .pencil { fill: var(--alt); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.wf .lead { fill: var(--ink); }
.wf .ball { fill: var(--hot); stroke: var(--ink); stroke-width: 3; }
.wf .ghost { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 6 6; }
.wf .ghost-box { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 7 6; }
.wf .foam { fill: var(--ink); opacity: .35; }
.wf .board { fill: #c8a46a; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.wf .wheel { fill: var(--ink); stroke: none; }
.wf .tape { stroke: #1479a8; stroke-width: 6; stroke-linecap: round; }
.wf .heli-backdrop { fill: #e8f2f5; }
.wf .tag { fill: var(--hi); stroke: var(--ink); stroke-width: 3; }
.wf .lab { font: 900 28px Arial, sans-serif; letter-spacing: .06em; }
.wf .lab.small { font-size: 25px; }
.wf .big { font: 900 40px var(--display); letter-spacing: -.02em; }
.wf .big.small-big { font-size: 32px; }
.wf .body-t { font: 700 28px Arial, sans-serif; }
.wf .body-t.small { font-size: 25px; }
.wf .tick-t { font: 600 25px Arial, sans-serif; fill: #4b5563; }
.wf .axis-t { font: 800 28px Arial, sans-serif; }
.wf .muted-t { fill: var(--muted); font-weight: 600; }
.wf .cyan-t { fill: #1479a8; }
.wf .hot-t { fill: #c2410c; }

/* Match the data-set bullets and table keys to the plot. */
.data .set-a th, .points .set-a::before { background: #c9ee49; }
.data .set-b th, .points .set-b::before { background: #ff795e; }
.data .set-c th, .points .set-c::before { background: #42cbe8; }

/* Hero plot card (companion home page) */
.machine { position: relative; display: grid; place-items: center; height: 640px; }
.plot-card { width: 500px; padding: 26px; background: var(--paper); color: var(--ink); transform: rotate(2deg); box-shadow: 18px 18px 0 var(--cyan); }
.plot-label { padding-bottom: 12px; border-bottom: 2px solid; font: 900 22px Arial, sans-serif; letter-spacing: .2em; }
.plot-card p { margin: 20px 0 0; font: 900 28px/1.08 var(--display); text-transform: uppercase; letter-spacing: -.04em; }
.chart { position: relative; height: 320px; margin: 22px 6px 0 22px; border-left: 4px solid var(--navy); border-bottom: 4px solid var(--navy); background-image: linear-gradient(rgba(7, 22, 47, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 22, 47, .08) 1px, transparent 1px); background-size: 48px 48px; overflow: hidden; }
.chart .point { position: absolute; z-index: 2; width: 18px; height: 18px; border: 5px solid var(--navy); border-radius: 50%; background: var(--hi); transform: translate(-50%, 50%); }
.chart .p1 { left: 10%; bottom: 12%; } .chart .p2 { left: 27%; bottom: 28%; } .chart .p3 { left: 45%; bottom: 43%; } .chart .p4 { left: 65%; bottom: 61%; } .chart .p5 { left: 86%; bottom: 80%; }
.chart .point.outlier { left: 62%; bottom: 27%; width: 24px; height: 24px; background: var(--hot); }
.chart .trend { position: absolute; left: -5%; bottom: 47%; width: 112%; height: 6px; background: var(--cyan); transform: rotate(-39deg); }
.machine .stamp.one { left: -24px; right: auto; top: -40px; transform: rotate(-9deg); }
.machine .stamp.two { top: auto; right: -10px; bottom: 70px; transform: rotate(6deg); }
.machine .stamp { right: -10px; top: 20px; }

/* Anomalous result decision route */
.route { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.route > div { position: relative; padding: 18px 20px; border: 2px solid var(--ink); background: var(--card); font-size: 28px; font-weight: 700; line-height: 1.25; box-shadow: 6px 6px 0 rgba(7, 22, 47, .12); }
.route > div b { display: block; margin-bottom: 6px; font: 900 22px Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.route > div:not(:last-child)::after { content: ""; position: absolute; right: -30px; top: 50%; border-block: 12px solid transparent; border-left: 16px solid var(--ink); transform: translateY(-50%); }
.route > div.go { background: var(--accent); }
.outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

/* Evaluation chain */
.chain { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.chain .card { position: relative; }
.chain .card:not(:last-child)::after { content: ""; position: absolute; right: -36px; top: 50%; border-block: 13px solid transparent; border-left: 18px solid var(--ink); transform: translateY(-50%); }
.chain .card p { color: var(--ink); font-weight: 700; }

/* Project path */
.path { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.path > div { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 25px; font-weight: 800; line-height: 1.15; }
.path > div i { display: grid; place-items: center; width: 72px; height: 72px; border: 2px solid var(--ink); border-radius: 50%; background: var(--accent); font: 900 26px Arial, sans-serif; font-style: normal; }
.path > div.gate i { background: var(--navy); color: var(--hi); }

/* Fill-in frames */
.frame { padding: 18px 24px; border: 2px dashed var(--ink); background: var(--card); font-size: 29px; line-height: 1.55; }
.frame .blank { display: inline-block; min-width: 120px; border-bottom: 3px solid var(--ink); }
.frame .blank.s { min-width: 70px; }
.frame b { font-weight: 900; }

/* Diagram builds. Scoped to the live deck on screen, so thumbnails and print keep
   the finished diagram. */
.wf .live-only { display: none; }
/* Thumbnails show a built diagram complete. */
.thumb-slide .wf .step[class*="step k"]:not(.shown) { opacity: 1; transform: none; }
@media screen {
  #deck .wf .step:not(.shown) { transform: none; }
  #deck .wf .live-only { display: inline; }
  #deck .wf .still-only { display: none; }
  /* Parts that appear with a text step already on the slide. */
  #deck .wf .sync { transition: opacity .4s ease; }
  #deck .slide:not(:has(.worked .step:nth-child(1).shown)) .sync-w1,
  #deck .slide:not(:has(.worked .step:nth-child(2).shown)) .sync-w2,
  #deck .slide:not(:has(.worked .step:nth-child(3).shown)) .sync-w3,
  #deck .slide:not(:has(li.step:nth-child(1).shown)) .sync-l1,
  #deck .slide:not(:has(li.step:nth-child(4).shown)) .sync-l4 { opacity: 0; }
  /* Reading between the points: up to the line, then across to the axis. */
  #deck .wf .draw-guide { stroke-dasharray: var(--dashes); transition: stroke-dashoffset 1.6s ease-in-out; }
  #deck .slide:not(:has(li.step:nth-child(4).shown)) .draw-guide { stroke-dashoffset: var(--hidden); }
  #deck .wf .sync-l4 { transition-delay: 1.5s; }
  #deck .slide:not(:has(li.step:nth-child(4).shown)) .sync-l4 { transition-delay: 0s; }
  /* Drop test: one run on the first click. The ball speeds up as it falls, then slows
     as it rises straight back up, and stays at the bounce height to be read. */
  #deck .wf .drop-ball { transition: transform .5s ease-in-out; }
  #deck .wf:has(.k1.shown) .drop-ball { transform: translateY(var(--rise)); animation: drop-bounce 1.4s both; }
  #deck .wf .release { transition: fill .3s ease; }
  #deck .wf:has(.k1.shown) .release { fill: transparent; stroke-dasharray: 6 6; }
  #deck .wf .bounce-path { transform: translateX(-60px); }
  #deck .wf:has(.bounce-path):has(.k2.shown) .k1 { opacity: 0; }
  /* Ramp: one run on the first click. The trolley speeds up down the slope, levels out
     at the foot and slows to a stop along the floor. */
  #deck .wf .trolley { transform: var(--at-start); transition: transform .6s ease-in-out; }
  #deck .wf:has(.k1.shown) .trolley { transform: var(--at-rest); animation: ramp-run 2.4s both; }
}
@media (prefers-reduced-motion: reduce) {
  #deck .wf .sync, #deck .wf .draw-guide, #deck .wf .drop-ball, #deck .wf .release, #deck .wf .trolley { transition: none !important; animation: none !important; }
}
@keyframes drop-bounce {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.11, 0, .5, 0); }
  58% { transform: translateY(var(--land)); animation-timing-function: cubic-bezier(.5, 1, .89, 1); }
  100% { transform: translateY(var(--rise)); }
}
@keyframes ramp-run {
  0% { transform: var(--at-start); animation-timing-function: cubic-bezier(.11, 0, .5, 0); }
  52% { transform: var(--at-foot); animation-timing-function: linear; }
  57% { transform: var(--on-floor); animation-timing-function: cubic-bezier(.5, 1, .89, 1); }
  100% { transform: var(--at-rest); }
}

/* News slides: each mission's case as the front page of an invented paper, with a real
   photograph (images/case-*.jpg). The credit under each photo links to its source. */
.masthead { display: flex; align-items: center; gap: 22px; padding-bottom: 14px; border-bottom: 6px double var(--ink); }
.masthead .paper-name { font: 900 44px/1 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.masthead .dateline { margin-left: auto; font: 900 20px Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.masthead .edition { padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--accent); font: 900 20px Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.front { display: grid; grid-template-columns: 690px 1fr; gap: 50px; margin-top: 28px; }
.news-photo { margin: 0; min-height: 0; }
.news-photo img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--accent); background: #05060c; }
.news-photo.whole img { height: 520px; object-fit: contain; }
.news-photo figcaption { margin-top: 24px; font-size: 24px; font-weight: 700; line-height: 1.3; }
.news-photo .credit { display: block; margin-top: 5px; font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; }
.news-photo .credit a { color: inherit; }
.story { display: flex; flex-direction: column; min-height: 0; }
.story .kicker { align-self: flex-start; margin: 0; padding: 6px 13px; background: var(--ink); color: var(--paper); font: 900 20px Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.story h2 { margin: 18px 0 20px; font-size: 68px; }
.story .standfirst { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.3; }
.story .follow-up { margin: 22px 0 0; padding: 12px 18px 14px; border-left: 8px solid var(--accent); background: var(--card); font-size: 26px; line-height: 1.3; }
.story .ask { margin: auto 0 0; padding: 14px 20px 16px; border: 2px solid var(--ink); background: var(--accent); font-size: 29px; font-weight: 800; line-height: 1.2; box-shadow: 6px 6px 0 rgba(7, 22, 47, .12); }
.story .follow-up b, .story .ask b { display: block; margin-bottom: 5px; font: 900 20px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.story .follow-up b { color: var(--muted); }