/* Atomic Clock lesson. All rules scoped under .atc-* */
.atc-sc { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.atc-note { font-size: 12px; color: var(--faint); text-align: center; max-width: 300px; }

/* watches */
.atc-watch { display: block; width: 150px; height: 150px; }
.atc-watch.atc-small { width: 118px; height: 118px; }
.atc-case { fill: #2a2f45; stroke: var(--gold); stroke-width: 5; }
.atc-face { fill: #f3efe6; }
.atc-ticks line { stroke: #2a2f45; stroke-width: 5; stroke-linecap: round; }
.atc-hr { stroke: #1d2133; stroke-width: 8; stroke-linecap: round; }
.atc-min { stroke: #1d2133; stroke-width: 5; stroke-linecap: round; }
.atc-sec line { stroke: #d84f4f; stroke-width: 2.5; stroke-linecap: round; }
.atc-pin { fill: #d84f4f; }
.atc-pair { flex-direction: row; justify-content: center; align-items: center; gap: 14px; }
.atc-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.atc-xtal { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 120px; min-height: 120px; padding: 6px; border-radius: 16px; border: 2px solid var(--violet-bright); background: var(--surface); box-shadow: 0 0 18px rgba(123,92,253,.35); cursor: pointer; font: 700 12.5px var(--sans); color: var(--dim); }
.atc-xtal:disabled { cursor: default; color: var(--dim); opacity: 1; }
.atc-xtal img { width: 84px; height: 84px; object-fit: contain; }
.atc-xtal.atc-buzz img { animation: atcBuzz .05s linear infinite alternate; }
@keyframes atcBuzz { from { translate: -1.5px 0; } to { translate: 1.5px 0; } }
.atc-count { display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.atc-count b { font: 800 24px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.atc-count span { font: 600 12.5px var(--sans); color: var(--dim); }
.atc-count.atc-done b { color: var(--gold); }
.atc-two { display: flex; justify-content: center; gap: 22px; }
.atc-w { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.atc-read { display: flex; flex-direction: column; align-items: center; }
.atc-read b { font: 800 20px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.atc-read span { font: 600 12.5px var(--sans); color: var(--dim); white-space: nowrap; }
.atc-w.atc-fast .atc-read b, .atc-w.atc-slow .atc-read b { color: var(--gold); }

/* the cesium chamber */
.atc-tubebox { display: flex; align-items: center; width: 100%; position: relative; }
.atc-tube { display: block; width: 100%; height: auto; }
.atc-glass { fill: rgba(169,155,255,.06); stroke: rgba(234,227,215,.4); stroke-width: 2.5; }
.atc-mw { fill: none; stroke: var(--violet-bright); stroke-width: 2.5; opacity: .75; }
.atc-feed { stroke: var(--violet-bright); stroke-width: 3; }
.atc-at { fill: #4b4380; stroke: rgba(169,155,255,.5); stroke-width: 1.5; transition: fill .25s, filter .25s; }
.atc-at.atc-lit { fill: var(--gold); stroke: #fff3cf; filter: drop-shadow(0 0 5px rgba(252,192,80,.9)); }
.atc-qz { position: absolute; left: 0; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; width: 20%; font: 700 12px var(--sans); color: var(--dim); }
.atc-qz img { width: 100%; max-width: 54px; }
.atc-flip { font: 600 14px var(--sans); color: var(--dim); }
.atc-flip b { font: 800 20px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.atc-flip.atc-peak b { color: var(--gold); }
.atc-pitch { font: 600 13px var(--sans); color: var(--dim); min-height: 18px; }
.atc-pitch b { color: var(--text); font-variant-numeric: tabular-nums; }
.atc-pitch.atc-offp b { color: var(--gold); }

/* NIST-F2's 300 million years. The dinosaurs sit above the bar, so their tick crosses no label. */
.atc-nist { width: auto; height: 170px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(123,92,253,.3)); }
.atc-time { position: relative; width: 100%; height: 108px; }
.atc-bar { position: absolute; left: 6%; right: 6%; top: 50px; height: 8px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.atc-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); transition: width 1.8s cubic-bezier(.4,0,.2,1); }
.atc-time.atc-go .atc-bar i { width: 100%; }
.atc-mk { position: absolute; top: 66px; display: flex; flex-direction: column; font-family: var(--sans); opacity: 0; transition: opacity .4s; }
.atc-mk b { font-size: 14px; font-weight: 800; color: var(--text); }
.atc-mk span { font-size: 12.5px; color: var(--dim); }
.atc-m0 { left: 4%; }
.atc-m1 { left: calc(23.6% - 9px); top: 0; }
.atc-m2 { right: 4%; align-items: flex-end; text-align: right; }
.atc-mk::before { content: ''; position: absolute; top: -20px; width: 3px; height: 14px; background: var(--line-strong); }
.atc-m0::before { left: 8px; } .atc-m2::before { right: 8px; } .atc-m1::before { left: 8px; top: auto; bottom: -12px; height: 10px; }
.atc-time.atc-go .atc-m0 { opacity: 1; }
.atc-time.atc-go .atc-m1 { opacity: 1; transition-delay: .7s; }
.atc-time.atc-go .atc-m2 { opacity: 1; transition-delay: 1.7s; }

/* clock error to map error */
.atc-zsvg { display: block; width: 100%; height: auto; border-radius: 14px; background: #17203a; }
.atc-lv { opacity: 0; transition: opacity .35s; }
.atc-lv.atc-on { opacity: 1; }
.atc-phone { fill: #2c3450; stroke: var(--text); stroke-width: 2; }
.atc-blocks rect { fill: rgba(234,227,215,.10); }
.atc-landm { fill: rgba(63,214,154,.12); }
.atc-hwy { fill: none; stroke: rgba(234,227,215,.22); stroke-width: 3; }
.atc-earth { fill: #3D8BFF; stroke: #9cc3ff; stroke-width: 1.5; }
.atc-moon { fill: #cfcac0; }
.atc-lbl { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.atc-err { fill: rgba(252,192,80,.10); stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 5 4; transition: r .35s, cx .35s, opacity .3s; }
.atc-err.atc-hide { opacity: 0; }
.atc-you { fill: #3D8BFF; stroke: #fff; stroke-width: 2; }
.atc-zread { display: flex; flex-direction: column; align-items: center; }
.atc-zread b { font: 800 24px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.atc-zread span { font: 600 13px var(--sans); color: var(--dim); }

@media (max-height: 700px) {
  .atc-watch { width: 120px; height: 120px; }
  .atc-watch.atc-small { width: 96px; height: 96px; }
  .atc-xtal { min-height: 100px; width: 104px; }
  .atc-xtal img { width: 66px; height: 66px; }
  .atc-sc { max-width: 320px; gap: 6px; }
  .atc-nist { height: 130px; }
}