/* Coded interface fragments (see _build/ui.mjs). Everything is in em. Sample data only. */

/* A screen scales from its container: 1em = 1/30 of the width. */
.uiq { container-type: inline-size; }
.panel { font-size: calc(100cqw / 30); line-height: 1.3; letter-spacing: -0.01em; }

/* Status chip */
.u-chip { display: inline-block; padding: 0.3em 0.6em; font-size: 0.72em; font-weight: 600; line-height: 1.1; white-space: nowrap; background: var(--paper-2); color: var(--ink); }
.u-chip.is-progress { background: var(--paper-2); }
.u-chip.is-done { background: var(--ink); color: var(--white); }
.u-chip.is-open { background: transparent; outline: 1px solid var(--line); outline-offset: -1px; }
.u-chip.is-late { background: var(--orange); }

.u-segs { display: flex; gap: 0.2em; }
.u-segs i { flex: 1; height: 0.6em; background: var(--seg, var(--paper-2)); }
.u-segs i.on { background: var(--seg-on, var(--ink)); }


/* ---- Work order card ---- */
.wo { background: var(--white); color: var(--ink); padding: 1.1em; display: grid; gap: 0.75em; }
.wo__top { display: flex; justify-content: space-between; align-items: center; gap: 0.6em; }
.wo__id { font-size: 0.8em; color: var(--mute); font-weight: 500; }
.wo__title { font-size: 1.5em; font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.wo__meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0.6em; margin: 0; }
.wo__meta dt { font-size: 0.72em; color: var(--mute); }
.wo__meta dd { font-size: 0.82em; font-weight: 500; }
.wo__btn { display: block; padding: 0.7em; background: var(--ink); color: var(--white); text-align: center; font-size: 0.85em; font-weight: 600; }

/* ---- Stage panels: square, solid ---- */
.panel { position: relative; width: 100%; aspect-ratio: 1; padding: 1.6em; display: flex; flex-direction: column; overflow: hidden; }
.panel__bar { display: flex; justify-content: space-between; font-size: 0.85em; font-weight: 500; margin-bottom: 1.3em; flex: none; }
.panel--design { background: var(--paper); color: var(--ink); }
.panel--build { background: var(--ink-2); color: var(--white); }
.panel--deploy { background: var(--paper); color: var(--ink); }
.panel--train { background: var(--paper); color: var(--ink); }

/* Design: redlines over the card */
.spec { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1em; }
.spec__frame { position: relative; margin: 1.8em 2em 0; outline: 0.09em solid var(--ink); }
.spec__corner { position: absolute; width: 0.5em; height: 0.5em; background: var(--white); outline: 0.09em solid var(--ink); }
.spec__corner.c1 { left: -0.25em; top: -0.25em; } .spec__corner.c2 { right: -0.25em; top: -0.25em; }
.spec__corner.c3 { left: -0.25em; bottom: -0.25em; } .spec__corner.c4 { right: -0.25em; bottom: -0.25em; }
.spec__line { position: absolute; background: var(--orange); font-style: normal; }
.spec__line b { position: absolute; font-size: 0.68em; font-weight: 600; color: var(--orange-deep); }
.spec__line--top { left: 50%; top: -1.6em; width: 0.08em; height: 1.45em; }
.spec__line--top b { left: 0.5em; top: 0; }
.spec__line--left { top: 50%; left: -1.85em; height: 0.08em; width: 1.7em; }
.spec__line--left b { left: 0.2em; top: 0.2em; }
.spec__h { position: absolute; left: 0; right: 0; top: 1.1em; height: 0.06em; background: var(--orange); }
.spec__h--2 { top: auto; bottom: 1.1em; }
.spec__tag { position: absolute; right: 0; top: -1.9em; padding: 0.3em 0.55em; background: var(--ink); color: var(--white); font-size: 0.68em; font-style: normal; font-weight: 500; }
.spec__tokens { display: flex; align-items: center; gap: 0.5em; padding-top: 1em; border-top: 0.06em solid var(--line); }
.spec__sw { width: 1.8em; height: 1.8em; background: var(--c); }
.spec__type { font-size: 1.5em; font-weight: 600; margin-left: 0.4em; letter-spacing: -0.03em; }
.spec__grid { margin-left: auto; font-size: 0.8em; color: var(--mute); }

/* Build: real code */
.code { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; gap: 0.8em; font-family: var(--font-code); font-size: 0.8em; line-height: 1.68; letter-spacing: 0; }
.code__lines { counter-reset: l; }
.code__lines li { counter-increment: l; display: flex; white-space: pre; }
.code__lines li::before { content: counter(l); width: 2.2em; flex: none; color: #5d5d6e; }
.code code { font: inherit; }
.code k { color: var(--mute-on-ink); } .code f { color: var(--white); } .code t { color: var(--white); } .code s { text-decoration: none; color: var(--mute-on-ink); }
.code__term { display: grid; padding-top: 0.8em; border-top: 0.06em solid var(--ink-3); color: var(--mute-on-ink); }
.code__term .ok { color: var(--white); }

/* Deploy: the running app */
.app { background: var(--white); color: var(--ink); flex: 1; display: flex; flex-direction: column; min-height: 0; }
.app__url { padding: 0.55em 0.9em; background: var(--paper-2); font-size: 0.75em; color: var(--mute); }
.app__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0.9em 1em 0.6em; }
.app__head strong { font-size: 1.3em; font-weight: 600; letter-spacing: -0.025em; }
.app__head span { font-size: 0.75em; color: var(--mute); }
.app__rows li { display: grid; grid-template-columns: 4.6em 1fr auto; gap: 0.5em; align-items: center; padding: 0.62em 1em; border-top: 0.06em solid var(--paper-2); font-size: 0.92em; }
.app__id { font-size: 0.78em; color: var(--mute); }
.app__t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live { display: inline-flex; align-items: center; gap: 0.45em; }
.live::before { content: ''; width: 0.6em; height: 0.6em; background: var(--orange); }
.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25em; margin-top: 0.7em; flex: none; }
.pipe li { padding: 0.5em 0.6em; font-size: 0.75em; font-weight: 500; background: var(--paper-2); color: var(--ink); }
.pipe li:last-child { background: var(--ink); color: var(--white); }

/* Train: the same card, now a lesson */
.lesson { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; gap: 0.9em; }
.lesson__title { font-size: 2.1em; font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.lesson__stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; align-items: end; }
.lesson__note { background: var(--ink); color: var(--white); padding: 0.9em; font-size: 0.86em; line-height: 1.32; }
.lesson__note i { display: block; font-style: normal; color: var(--mute-on-ink); font-weight: 500; font-size: 0.9em; margin-bottom: 0.3em; }
.lesson__note b { display: block; font-weight: 600; margin-bottom: 0.25em; }
.lesson .wo { padding: 0.9em; }
.lesson .wo__title { font-size: 1.15em; }
.lesson .wo__meta { grid-template-columns: 1fr 1fr; }
.lesson .wo__meta div:last-child { display: none; }
.lesson__team { display: grid; grid-template-columns: auto 1fr auto; gap: 0.8em; align-items: center; font-size: 0.85em; font-weight: 600; --seg: var(--paper-2); --seg-on: var(--ink); }
.lesson__team .u-segs i { height: 0.9em; }

/* Motion, only when a panel is the active stage */
@media (prefers-reduced-motion: no-preference) {
  .js [data-box] .code__lines li { opacity: 0; }
  .js [data-box] .is-active .code__lines li { animation: uiLine 0.01s linear forwards; animation-delay: calc(var(--i) * 70ms + 300ms); }
  .js [data-box] .code__term { opacity: 0; }
  .js [data-box] .is-active .code__term { animation: uiLine 0.01s linear forwards; animation-delay: 1.3s; }
  .js [data-box] .pipe li:last-child { background: var(--paper-2); color: var(--ink); }
  .js [data-box] .is-active .pipe li:last-child { animation: uiLive 0.3s linear forwards 0.9s; }
  .js [data-box] .spec__frame { outline-color: transparent; }
  .js [data-box] .spec__line, .js [data-box] .spec__tag, .js [data-box] .spec__h, .js [data-box] .spec__corner { opacity: 0; }
  .js [data-box] .is-active .spec__frame { animation: uiOutline 0.01s linear forwards 0.25s; }
  .js [data-box] .is-active .spec__corner, .js [data-box] .is-active .spec__tag { animation: uiLine 0.01s linear forwards 0.4s; }
  .js [data-box] .is-active .spec__h { animation: uiLine 0.01s linear forwards 0.65s; }
  .js [data-box] .is-active .spec__line { animation: uiLine 0.01s linear forwards 0.85s; }
  .js [data-box] .lesson__note, .js [data-box]   .js [data-box] .is-active   .js [data-box] .is-active .lesson__note { animation: uiLine 0.01s linear forwards 0.75s; }
}
@keyframes uiLine { to { opacity: 1; } }
@keyframes uiOutline { to { outline-color: var(--ink); } }
@keyframes uiLive { to { background: var(--ink); color: var(--white); } }

.k-x { background: var(--ink); } .k-y { background: var(--mute); } .k-z { background: var(--line); } .k-w { background: var(--paper-2); }