/* Bot Forge look (Juno, 2026-10-08).
   Tokens only, so Night Desk and Classic both work. No libraries.
   The engine sets classes. This file does the drawing and the motion.
   Shift timings are Knox BUILD-SPEC.md: 0, 1.0, 1.4, 8.5, 10s, in js/shift.js. */

.forge {
  --fj: var(--gold, #d4a017);
  --ft: var(--door-1, #3fd1c3);
  --fs: var(--orange, #e87a2e);
  --fr: var(--purple, #6b4fa0);
  --fx: var(--pink, #f25aa6);
  background: var(--band-bg, #14122b);
  color: var(--band-ink, #f2f3fa);
  padding: 1.4rem 0 2rem;
}
/* The site .wrap already sets the column. Extra padding here shoved the board in. */
.forge .wrap { max-width: none; padding: 0; }
.forge-kicker {
  font: 700 .74rem/1 var(--font-sans, system-ui); letter-spacing: .16em;
  text-transform: uppercase; color: var(--band-accent, #d4a017); margin: 0 0 .35rem;
}
.forge h1 { font: 700 clamp(1.8rem, 3vw, 2.4rem)/1.05 var(--font-serif, Georgia, serif); color: var(--band-head, #fff); margin: 0 0 .4rem; }
.forge-lead { color: var(--band-soft, #b9b8d9); margin: 0 0 1.1rem; max-width: 38rem; }

/* Board: bot on the left, four steps on the right. */
.forge-board {
  display: grid; grid-template-columns: 180px 1fr; gap: 1.2rem; align-items: center;
}
.forge-stage { display: grid; place-items: center; min-height: 180px; }

.forge-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; list-style: none; margin: 0; padding: 0; }
.forge-slot {
  min-height: 92px; border: 2px dashed color-mix(in srgb, var(--band-ink, #f2f3fa) 40%, transparent); border-radius: 10px;
  padding: .4rem .45rem .5rem; background: color-mix(in srgb, var(--card, #fff) 8%, transparent);
}
.forge-slot[data-slot="job"] { --sc: var(--fj); }
.forge-slot[data-slot="name"] { --sc: var(--ft); }
.forge-slot[data-slot="stop"] { --sc: var(--fx); }
.forge-slot[data-slot="stop-place"] { --sc: var(--fr); }
/* Chip, not bare accent text. Gold and pink take dark type. Purple takes light type.
   Classic name is dark teal, so that chip is light type too. All four clear 4.5:1. */
#forge .forge-slot-label {
  display: inline-block; font: 700 .68rem/1 var(--font-sans, system-ui); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink, #14131f); background: var(--sc, var(--band-soft));
  padding: .16rem .38rem; border-radius: 4px; margin-bottom: .35rem;
}
#forge .forge-slot[data-slot="stop-place"] .forge-slot-label,
html[data-theme="classic"] #forge .forge-slot[data-slot="name"] .forge-slot-label { color: #fff; }
.forge-slot.is-filled { border-style: solid; border-color: var(--sc); background: var(--card, #fff); color: var(--ink, #14131f); }
/* Filled step cards stay solid in a shift. styles.css dims every slot that is not the fix. */
#forge[data-mode="shift"] ol.forge-slots > li.forge-slot.is-filled,
#forge[data-mode="done"] ol.forge-slots > li.forge-slot.is-filled { opacity: 1; }
.forge-slot.is-fix { animation: forge-fix 1s ease-in-out infinite; }
@keyframes forge-fix { 50% { box-shadow: 0 0 0 3px var(--fx); } }

/* Cards. Light tickets, hard edge, accent kicker. Same in the tray and in a slot. */
.forge-card {
  display: block; background: var(--card, #fff); color: var(--ink, #14131f);
  border: 2px solid #0d0b1f; border-radius: 8px; padding: .35rem .45rem .4rem;
  font: 600 .82rem/1.2 var(--font-sans, system-ui);
}
.forge-card-kicker { display: block; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sc, var(--ink-soft, #4d5166)); }
.forge-tray { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.forge-card.is-ghost { opacity: .9; }

/* The bot. Parts start blank and appear as slots fill. */
#forge .forge-bot { position: relative; width: 96px; height: 124px; }
#forge .fb-body {
  position: absolute; left: 16px; top: 10px; width: 64px; height: 64px; border-radius: 12px;
  border: 2px dashed var(--band-soft, #b9b8d9); background: transparent;
  transition: background .35s ease, border-color .35s ease;
}
#forge .fb-eyes { position: absolute; left: 28px; top: 30px; display: flex; gap: 8px; opacity: .45; transition: opacity .3s; }
#forge .fb-eyes i { width: 12px; height: 3px; border-radius: 3px; background: #0d0b1f; display: block; transform-origin: 50% 50%; transition: height .3s, border-radius .3s, background .3s; }
#forge .fb-arms { position: absolute; left: 4px; right: 4px; top: 36px; height: 5px; opacity: 0; transition: opacity .3s; }
#forge .fb-arms::before, #forge .fb-arms::after { content: ""; position: absolute; top: 0; width: 16px; height: 5px; background: #0d0b1f; border-radius: 3px; }
#forge .fb-arms::before { left: 0; }
#forge .fb-arms::after { right: 0; }
#forge .fb-legs { position: absolute; left: 36px; top: 76px; width: 24px; height: 22px; opacity: 0; transition: opacity .3s; }
#forge .fb-legs i { position: absolute; top: 0; width: 5px; height: 20px; background: #0d0b1f; border-radius: 3px; transform-origin: 50% 0; }
#forge .fb-legs i:first-child { left: 2px; }
#forge .fb-legs i:last-child { right: 2px; }
#forge .fb-stop {
  position: absolute; left: 62px; top: 8px; width: 22px; height: 22px; border-radius: 6px;
  background: var(--fx); border: 2px solid #0d0b1f; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s;
}
#forge .fb-stop::before { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 3px; background: #fff; border-radius: 2px; }

#forge .forge-bot.has-job .fb-body { background: var(--teal, #0f6e6a); border: 2px solid #0d0b1f; }
#forge .forge-bot.has-name .fb-eyes { opacity: 1; }
#forge .forge-bot.has-name .fb-eyes i { height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid #0d0b1f; position: relative; }
#forge .forge-bot.has-name .fb-eyes i::after { content: ""; position: absolute; width: 5px; height: 6px; border-radius: 50%; background: #0d0b1f; top: 3px; left: 4px; }
#forge .forge-bot.has-name .fb-legs { opacity: 1; }
#forge .forge-bot.has-name .fb-legs i:first-child { animation: fb-step .32s ease-in-out infinite alternate; }
#forge .forge-bot.has-name .fb-legs i:last-child { animation: fb-step .32s ease-in-out infinite alternate-reverse; }
#forge .forge-bot.has-name .fb-body { animation: fb-bob .32s ease-in-out infinite alternate; }
#forge .forge-bot.has-stop .fb-stop { opacity: 1; transform: none; }
#forge .forge-bot.has-stop-place .fb-arms { opacity: 1; }
@keyframes fb-step { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
@keyframes fb-bob { to { translate: 0 -2px; } }

/* Shift reactions. Engine adds is-ok or is-miss for the beat, then removes it. */
#forge .forge-bot.is-ok { animation: fb-hop .55s ease; }
#forge .forge-bot.is-miss { animation: fb-wobble .7s ease; }
#forge .forge-bot.is-miss .fb-eyes i { transform: scaleY(.35); }
@keyframes fb-hop { 40% { translate: 0 -10px; } }
@keyframes fb-wobble { 25% { rotate: -7deg; } 55% { rotate: 6deg; } 100% { rotate: 0deg; } }

.shift { margin-top: 1rem; display: grid; grid-template-columns: 1fr auto; gap: .8rem 0; align-items: start; }
.shift-event {
  background: var(--card, #fff); color: var(--ink, #14131f); border: 2px solid #0d0b1f; border-radius: 10px;
  padding: .7rem .8rem; min-height: 4.5rem;
}
.shift-event h2 { font: 700 1.05rem/1.2 var(--font-serif, Georgia, serif); margin: 0 0 .25rem; }
.shift-event p { margin: 0; color: var(--ink-soft, #4d5166); }
.shift.is-beat .shift-event { animation: forge-ev-in .4s ease both; }
@keyframes forge-ev-in { from { opacity: 0; translate: 18px 0; } to { opacity: 1; translate: 0 0; } }

.shift-bubble {
  justify-self: end; max-width: 16rem; margin-left: .8rem; background: var(--card, #fff); color: var(--ink, #14131f);
  border: 2px solid #0d0b1f; border-radius: 10px; padding: .45rem .6rem; font: 700 .9rem/1.25 var(--font-sans, system-ui);
}
.shift-stamp {
  display: inline-block; margin-top: .35rem; font: 800 .72rem/1 var(--font-sans, system-ui);
  letter-spacing: .08em; text-transform: uppercase; padding: .2rem .4rem; border-radius: 4px; color: #fff;
}
.shift-stamp.is-ok { background: var(--teal, #0f6e6a); }
.shift-stamp.is-miss { background: var(--fx); }
/* Hidden until the 1.4s beat writes the line and the stamp. */
.shift-bubble:empty, .shift-stamp:empty { display: none; }
#forge #btn-skip { grid-column: 1 / -1; justify-self: start; }
/* While the bubble is showing that line, the newest log row stays out of view and out of the tab order.
   It appears when the next event clears the bubble, or when the shift is done. */
#forge[data-mode="shift"] .shift-bubble:not(:empty) ~ #shift-log > li.event:last-child { visibility: hidden; }

@media (max-width: 800px) {
  .forge-board { grid-template-columns: 1fr; }
  .forge-slots { grid-template-columns: 1fr 1fr; }
  .shift { grid-template-columns: 1fr; }
  .shift-bubble { margin-left: 0; }
}
@media (max-width: 390px) {
  .forge-slot { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #forge .forge-bot.is-ok, #forge .forge-bot.is-miss,
  #forge .forge-bot.has-name .fb-body, #forge .forge-bot.has-name .fb-legs i:first-child, #forge .forge-bot.has-name .fb-legs i:last-child,
  #forge .forge-slot.is-fix, #forge .shift.is-beat .shift-event { animation: none; }
  #forge .forge-bot.is-miss .fb-eyes i { transform: none; }
}