/* screens/calibrate.css: WP8, SPEC 3.9. A taiko metronome on the left, instructions, live status, the 16-click strip
   and the saved offset on the right. #metro-dot.on is toggled by main.js on every click (cal:tick): the head squashes
   (scale .94, 90ms) and a fire flash layer and a ring flare (opacity / transform only). The dots are driven by
   settings-view.js (cal:tick → .now / .done, cal:tap → .hit, cal:done → all done). */

#calibrate .stall__body {
  padding: calc(1.15rem + var(--ow-l)) calc(1.5rem + var(--ow-l)) calc(.6rem + var(--ow-l));
  overflow-x: hidden; scrollbar-gutter: auto;
}
#calibrate .calibrate-body {
  display: grid; grid-template-columns: 13rem minmax(0, 34rem); column-gap: 2.2rem; align-items: center; justify-content: center;
  min-height: 100%;
}

/* ---------------------------------------------------------------- the drum */
#calibrate .metro { position: relative; display: grid; place-items: center; width: 13rem; height: 13.5rem; isolation: isolate; }
#calibrate .metro::before {                      /* the barrel: wood with a red band, seen from slightly above */
  content: ''; position: absolute; left: 50%; top: calc(50% - 3.6rem); width: 10.6rem; height: 9.6rem; translate: -50% 0; z-index: -1;
  border: var(--ow-l) solid var(--ink); border-radius: 50% / 34%;
  background:
    radial-gradient(circle .2rem at 12% 74%, var(--gold) 0 90%, transparent),
    radial-gradient(circle .2rem at 30% 84%, var(--gold) 0 90%, transparent),
    radial-gradient(circle .2rem at 50% 87%, var(--gold) 0 90%, transparent),
    radial-gradient(circle .2rem at 70% 84%, var(--gold) 0 90%, transparent),
    radial-gradient(circle .2rem at 88% 74%, var(--gold) 0 90%, transparent),
    linear-gradient(90deg, rgb(0 0 0 / .32), transparent 22%, rgb(255 255 255 / .16) 42%, transparent 60%, rgb(0 0 0 / .38)),
    linear-gradient(180deg, #9C3A1A 0 58%, var(--red) 58% 80%, #7A2410 80%);
  box-shadow: 0 .4rem 0 var(--ink), .5rem .7rem 0 0 rgb(13 11 22 / .35);
}
#metro-dot {
  position: relative; display: block; width: 9rem; height: 9rem; translate: 0 -1.6rem; border-radius: 50%;
  border: var(--ow-l) solid var(--ink);
  background:
    url(../../img/svg/mon.svg) 50% 50% / 46% auto no-repeat,
    radial-gradient(circle at 42% 36%, #FFFDF6, var(--ivory) 45%, var(--ivory-2) 78%, var(--ivory-3));
  box-shadow: 0 0 0 .5rem #7A2410, 0 0 0 calc(.5rem + var(--ow-s)) var(--ink), inset 0 -.4rem 0 rgb(44 15 21 / .1);
  transition: transform var(--t-instant) var(--ease-out);
}
#metro-dot::after {                              /* the flash: fire light on the skin, fades after each hit */
  content: ''; position: absolute; inset: -.1rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(255 246 168 / .95) 0 22%, rgb(255 138 28 / .7) 48%, rgb(232 32 47 / .2) 70%, transparent 74%);
  opacity: 0; transition: opacity 320ms var(--ease-out);
}
#metro-dot.on { transform: scale(.94); }
#metro-dot.on::after { opacity: 1; transition-duration: 0s; }
#calibrate .metro::after {                       /* a ring flare on every click */
  content: ''; position: absolute; left: 50%; top: 50%; width: 9.6rem; height: 9.6rem; margin: -4.8rem 0 0 -4.8rem; translate: 0 -1.6rem;
  border-radius: 50%; border: .26rem solid var(--f2); box-shadow: 0 0 0 .12rem var(--ink), inset 0 0 0 .12rem var(--ink);
  opacity: 0; pointer-events: none;
}
#calibrate .metro:has(#metro-dot.on)::after { --anim: wp8-flare 420ms var(--ease-out) both; animation: var(--anim); }
@keyframes wp8-flare { from { opacity: .95; transform: scale(1); } to { opacity: 0; transform: scale(1.3); } }
/* waiting for the first tap: the head breathes on the beat */
#calibrate .calibrate-body:not([data-phase="run"]) #metro-dot:not(.on) {
  --loop: ff-breathe calc(var(--beat, .397s) * 2) var(--ease-inout) var(--beat-delay, 0s) infinite alternate; animation: var(--loop);
}
body.lowfx #calibrate .calibrate-body #metro-dot { animation: none; }

/* ---------------------------------------------------------------- instructions, status, strip, readout */
#calibrate .cal-info { display: grid; align-content: center; gap: .8rem; min-width: 0; max-width: 34rem; }
#calibrate .cal-info > .body {
  margin: 0; padding: .55rem .8rem .55rem 2.6rem; position: relative;
  border: var(--ow-s) solid rgb(44 15 21 / .2); border-radius: var(--r-m); background: rgb(255 250 240 / .65);
  font: 800 var(--fs-body)/1.45 var(--font-body); color: var(--ink-2);
}
#calibrate .cal-info > .body::before {           /* a fret cap: "press here" */
  content: ''; position: absolute; left: .7rem; top: .7rem; width: 1.4rem; height: 1.4rem; border-radius: var(--r-xs);
  border: var(--ow-s) solid var(--ink);
  background: linear-gradient(180deg, #22d65a 0 .32rem, var(--ink) .32rem calc(.32rem + 1.5px), var(--paper) 0);
  box-shadow: 0 .14rem 0 var(--ink);
}
#cal-status {
  display: flex; align-items: flex-start; gap: .55rem; margin: 0; min-height: 1.6em;
  font: 700 var(--fs-h3)/1.22 var(--font-display); font-stretch: 85%; color: var(--ink); text-wrap: pretty;
}
#cal-status::before {
  content: ''; flex: none; width: 1.3rem; height: 1.6rem; margin-top: -.1rem;
  background: url(../../img/svg/flame-flame-rim.svg) 50% 100% / contain no-repeat;
}
#calibrate .calibrate-body[data-phase="done"] #cal-status { color: #12773C; }
#calibrate .calibrate-body[data-phase="done"] #cal-status::before { background-image: url(../../img/svg/check.svg); height: 1.3rem; margin-top: .1rem; }
#calibrate .calibrate-body[data-phase="retry"] #cal-status { color: var(--red-deep); }

/* the 16-click strip: 4 practice + 12 measured, labelled under brackets */
#calibrate .cal-dots {
  position: relative; display: flex; align-items: center; gap: .36rem; margin: 0; padding: .1rem 0 1.6rem; list-style: none;
}
#calibrate .cal-dots li {
  position: relative; flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  border: var(--ow-s) solid var(--ink); background: var(--paper);
  box-shadow: 0 .14rem 0 var(--ink);
  transition: transform var(--t-quick) var(--spring-pop);
}
#calibrate .cal-dots li.practice { border-style: dashed; border-color: var(--ink-2); background: var(--ivory-2); box-shadow: none; }
#calibrate .cal-dots li:nth-child(5) { margin-left: .55rem; }
#calibrate .cal-dots li.done { background: var(--ivory-3); }
#calibrate .cal-dots li.hit {
  background: url(../../img/svg/flame-flame.svg) 50% 55% / auto 70% no-repeat, linear-gradient(180deg, var(--f2), var(--f3));
}
#calibrate .cal-dots li.practice.hit { background: url(../../img/svg/flame-gold.svg) 50% 55% / auto 66% no-repeat, var(--f1); }
#calibrate .cal-dots li.now { transform: scale(1.32) translateY(-.08rem); z-index: 1; box-shadow: 0 .14rem 0 var(--ink), 0 0 0 .2rem rgb(255 210 58 / .7); }
/* bracket labels (decorative; the list is aria-hidden) */
#calibrate .cal-dots li:nth-child(1)::after, #calibrate .cal-dots li:nth-child(5)::after {
  position: absolute; left: -.1rem; top: calc(100% + .35rem); height: .9rem; padding-top: .22rem;
  border: .14rem solid rgb(91 58 64 / .45); border-bottom: 0; border-radius: .2rem .2rem 0 0;
  font: 900 var(--fs-small)/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2);
  text-align: center; white-space: nowrap;
}
#calibrate .cal-dots li:nth-child(1)::after { content: 'Practice'; width: calc(4 * 1.3rem + 3 * .36rem + .2rem); }
#calibrate .cal-dots li:nth-child(5)::after { content: 'Measured'; width: calc(12 * 1.3rem + 11 * .36rem + .2rem); }
#calibrate .cal-dots li:is(:nth-child(1), :nth-child(5))::after { box-sizing: border-box; line-height: 1.1; padding-top: .3rem; height: 1.25rem; }

/* the saved audio offset (written by settings-view: on entry, and after a run) */
#calibrate .cal-readout {
  justify-self: start; display: inline-flex; align-items: center; gap: .6rem; margin: 0; padding: .3rem .35rem .3rem .8rem;
  border: var(--ow) solid var(--ink); border-radius: var(--r-pill);
  background: url(../../img/svg/paper-grain.webp) 0 0 / 16rem, var(--grad-night); color: var(--ivory-3);
  box-shadow: 0 .22rem 0 var(--ink);
}
#calibrate .cal-readout__k { font: 900 var(--fs-small)/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
#calibrate .cal-readout__v {
  display: inline-grid; place-items: center; min-width: 4.8rem; height: 1.7rem; padding: 0 .6rem; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink); font: 700 1rem/1 var(--font-num);
}
#calibrate .cal-readout.is-new .cal-readout__v { background: var(--grad-gold); box-shadow: 0 0 0 var(--ow-s) var(--ink); }
#calibrate .cal-readout.is-new { --anim: ff-stamp 420ms var(--spring-stamp) backwards; animation: var(--anim); }

/* ---------------------------------------------------------------- compact stall body (< 50rem) */
@container (max-width: 50rem) {
  #calibrate .calibrate-body { grid-template-columns: 10rem minmax(0, 1fr); column-gap: 1.2rem; justify-content: stretch; }
  #calibrate .metro { width: 10rem; transform: scale(.8); }
  #calibrate .cal-dots { gap: .22rem; }
  #calibrate .cal-dots li { width: 1.05rem; height: 1.05rem; }
  #calibrate .cal-dots li:nth-child(1)::after { width: calc(4 * 1.05rem + 3 * .22rem + .2rem); }
  #calibrate .cal-dots li:nth-child(5)::after { width: calc(12 * 1.05rem + 11 * .22rem + .2rem); }
}