/* O pedido viajando (topo da página do Salão, salao.html): celular do garçom → fio com nós em losango →
   tablet da bancada e telão da parede → aviso de pronto de volta no celular. Só a página do Salão e a home
   (na prévia do Salão) carregam este arquivo, depois do pages.css.
   Linguagem do Núcleo: linhas de 1 px, losangos, recortes que "escrevem" a peça. Sem rótulos nos aparelhos:
   só o trilho 01 → 02 → 03 em cima explica o fluxo.

   Como o CSS se organiza:
   1. Desenho e QUADRO FINAL (pedido pronto + aviso). É o que aparece sem JS e com movimento reduzido.
   2. Estados da animação, só com html.of-js (posta pelo order-flow-head.js no <head>) e movimento liberado:
      o estado inicial do ciclo e as classes s-* que o order-flow.js põe no .of em cada momento. As mudanças
      são transições curtas (transform, opacity, clip-path); entre um momento e outro nada anima.
   As telas são a demo SIMPLIFICADA para ler pequeno: sem preços, seletor − 1 +, total nem tempo.
   Só tokens semânticos (var(--color-...)); as cores próprias abaixo são misturas deles (valem no claro e
   no escuro, porque os tokens do site mudam com o tema). */

.of {
  container: of / inline-size; /* nomeado: o palco mede a largura do componente */
  margin: 0;
  min-width: 0;
  /* Cores de status derivadas dos tokens (chips e aviso opacos) */
  --of-prep-bg: color-mix(in srgb, var(--color-accent) 24%, var(--color-panel-solid));
  --of-prep-fg: color-mix(in srgb, var(--color-accent) 50%, var(--color-text));
  --of-ready-bg: color-mix(in srgb, var(--color-success) 20%, var(--color-panel-solid));
  --of-ready-fg: color-mix(in srgb, var(--color-success) 62%, var(--color-text));
  /* Verde de texto sobre o fundo da página: no tema claro fica mais escuro (contraste ≥ 4,5:1) */
  --of-ok-text: color-mix(in srgb, var(--color-success) 78%, var(--color-text));
  /* Dourado da observação digitada (campo e comanda do celular): um pouco mais escuro no claro (≥ 4,5:1) */
  --of-typed: color-mix(in srgb, var(--color-exotic) 86%, var(--color-text));
  --of-wire: color-mix(in srgb, var(--color-line-strong) 55%, transparent);
  --of-ease: cubic-bezier(.2, .7, .2, 1); /* a mesma curva do site */
  --of-ease-io: cubic-bezier(.5, 0, .2, 1); /* volta suave (limpeza): sai devagar, chega devagar */
  /* Recortes: escrever da esquerda para a direita, apagar para a direita, nascer de uma linha */
  --of-w0: inset(-.3em calc(100% + 2px) -.3em -.3em);
  --of-w1: inset(-.3em -.3em -.3em -.3em);
  --of-wx: inset(-.3em -.3em -.3em calc(100% + 2px));
  --of-l0: inset(calc(50% - .5px) 100% calc(50% - .5px) 0);
  --of-t0: inset(0 100% calc(100% - 2px) 0);
}

/* Palco: tudo é medido em em. Celular (padrão): 1 em = largura / 26; computador: largura / 52 */
.of-stage {
  position: relative;
  width: 26em;
  max-width: 100%;
  margin-inline: auto;
  padding: .45em .5em .4em;
  font-size: .8125rem; /* reserva para navegador sem unidades de contêiner */
  font-size: min(calc(100cqw / 26), .875rem);
  color: var(--color-text);
  line-height: 1.25;
}

/* Cantos de mira (desenho técnico) */
.of-corner { position: absolute; width: 10px; height: 10px; border: 0 solid var(--color-line-strong); }
.of-corner--tl { left: 0; top: 0; border-width: 1px 0 0 1px; }
.of-corner--tr { right: 0; top: 0; border-width: 1px 1px 0 0; }
.of-corner--bl { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.of-corner--br { right: 0; bottom: 0; border-width: 0 1px 1px 0; }

/* ---------- Trilho das etapas: 01 Garçom → 02 Cozinha → 03 Pronto (na largura da cena) ----------
   Em caixa normal, sem espaçamento entre letras (nada de rótulo miúdo em caixa-alta); só o número é mono */
.of-rail {
  --of-gap: 5px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--of-gap);
  margin: 0 0 .8em; /* ocupa a largura da cena (a área de conteúdo do palco) */
  padding: 0 .2em;
  font-size: min(.75rem, .92em); /* 12 px; só encolhe em tela estreita (10 px em 320) */
  /* Celular: teto pela largura da peça, para as três etapas caberem inteiras em qualquer idioma e com fonte mais
     larga (~16 em de texto + até 92 px de losangos, vãos e traços mínimos). Antes o "01 Garçom" podia ser cortado */
  font-size: min(.75rem, .92em, calc((96cqw - 92px) / 16));
  line-height: 1.2;
  white-space: nowrap;
}
/* O texto das etapas nunca encolhe nem é cortado: quem cede espaço são os traços entre elas */
.of-step { display: flex; flex: none; align-items: center; gap: var(--of-gap); color: var(--color-muted); }
.of-step-txts { display: grid; flex: none; min-width: max-content; }
.of-step-txt { grid-area: 1 / 1; }
.of-step-txt b { font-family: var(--font-mono); font-size: .92em; font-weight: 500; margin-right: .35em; }
/* Acesa: só troca a cor, com a mesma espessura (com peso maior as letras ficavam mais largas e, por cima da
   camada apagada, pareciam dobradas). A camada apagada some onde a acesa aparece: nada fica embaixo */
.of-step-lit { color: var(--color-accent); }
.of-step--3 .of-step-lit { color: var(--of-ok-text); }
.of-step-txt:not(.of-step-lit) { visibility: hidden; }
/* Losango do trilho: contorno fino; o miolo acende com a etapa */
.of-mark { position: relative; width: 9px; height: 9px; border: 1px solid var(--color-line-strong); transform: rotate(45deg); flex-shrink: 0; }
.of-mark i { position: absolute; inset: 1px; background: var(--color-accent); }
.of-step--3 .of-mark i { background: var(--color-success); }
.of-link { position: relative; flex: 1 1 0; min-width: 6px; height: 1px; background: var(--color-line); }
.of-link-fill { position: absolute; inset: 0; background: var(--color-orb); transform-origin: 0 50%; }
.of-link-fill--2 { background: var(--color-success); }

/* ---------- Cena: posições em em (celular por padrão; computador no @container lá embaixo) ----------
   Celular: celular do garçom e tablet lado a lado em cima; o fio desce, se junta no nó central e chega ao
   telão largo embaixo (o olho lê de cima para baixo, na ordem do pedido). */
.of-scene { position: relative; width: 25em; height: 30.1em; margin-inline: auto; }

/* Sem rótulos em cima dos aparelhos: o celular encosta no topo da cena; o tablet (com a bancada) fica
   centrado na altura do celular; o telão desce logo abaixo do fio */
.of-dev { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.of-dev--phone { --x: 0em; --y: 0em; --w: 12.7em; --h: 18.8em; }
.of-dev--tab { --x: 13.5em; --y: 1.3em; --w: 11.5em; --h: 15.2em; }
.of-dev--tv { --x: 0em; --y: 21.3em; --w: 25em; --h: 8.8em; }

/* Nós do fio (P = celular, B = tablet, T = telão, J = central, K… = cantos) */
.of [data-node="P"] { --x: 6.35em; --y: 18.8em; }
.of [data-node="K1"] { --x: 6.35em; --y: 19.9em; }
.of [data-node="J"] { --x: 12.5em; --y: 19.9em; }
.of [data-node="T"] { --x: 12.5em; --y: 21.3em; }
.of [data-node="KB"] { --x: 19.25em; --y: 19.9em; }
.of [data-node="B"] { --x: 19.25em; --y: 16.5em; }
.of [data-node="KT"] { display: none; }
/* Segmentos (horizontais têm --w; verticais têm --h). --s0 e a origem: como cada um se desenha na entrada */
.of-seg--pk { --x: 6.35em; --y: 18.8em; --h: 1.1em; --s0: scaleY(0); transform-origin: 50% 0; }
.of-seg--kj { --x: 6.35em; --y: 19.9em; --w: 6.15em; --s0: scaleX(0); transform-origin: 0 50%; }
.of-seg--jt { --x: 12.5em; --y: 19.9em; --h: 1.4em; --s0: scaleY(0); transform-origin: 50% 0; }
.of-seg--jkb { --x: 12.5em; --y: 19.9em; --w: 6.75em; --s0: scaleX(0); transform-origin: 0 50%; }
.of-seg--kbb { --x: 19.25em; --y: 16.5em; --h: 3.4em; --s0: scaleY(0); transform-origin: 50% 100%; }
.of-seg--pj, .of-seg--jkt, .of-seg--ktt { display: none; }

/* Bancada: uma linha fina com hachura embaixo do tablet (desenho técnico) */
.of-counter { position: absolute; left: -.6em; right: -.4em; top: calc(100% + .45em); height: .55em; border-top: 1px solid var(--color-line-strong); background: repeating-linear-gradient(135deg, var(--color-line) 0 1px, transparent 1px 5px); transform-origin: 0 50%; }

/* ---------- Fio: segmentos de 1 px, nós em losango, pulso ---------- */
.of-seg { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--w, 1px); height: var(--h, 1px); margin: -.5px 0 0 -.5px; background: var(--of-wire); }
/* Rastro do pulso (criado pelo JS): o segmento cresce na cor do pulso e depois apaga */
.of-lit { position: absolute; inset: 0; background: currentColor; box-shadow: 0 0 5px currentColor; opacity: 0; }
.of-lit--orb, .of-head--orb { color: var(--color-orb); }
.of-lit--ok, .of-head--ok { color: var(--color-success); }
/* Cabeça do pulso: losango cheio com halo curto */
.of-head { position: absolute; z-index: 5; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; }
.of-head::before { content: ""; position: absolute; left: -.34em; top: -.34em; width: .68em; height: .68em; background: currentColor; transform: rotate(45deg); box-shadow: 0 0 .9em .2em currentColor; }

.of-node { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: .6em; height: .6em; margin: -.3em 0 0 -.3em; border: 1px solid var(--color-line-strong); background: var(--color-bg); transform: rotate(45deg); }
.of-node--hub { width: .95em; height: .95em; margin: -.475em 0 0 -.475em; border-color: var(--color-accent); }
.of-node--hub::after { content: ""; position: absolute; inset: .22em; background: var(--color-accent); }
.of-node i, .of-node b { position: absolute; z-index: 1; inset: -1px; background: var(--color-orb); opacity: 0; }
.of-node b { background: var(--color-success); }

/* ---------- Aparelhos em "desenho técnico": contorno fino duplo ---------- */
.of-frame { position: absolute; inset: 0; padding: .24em; border: 1px solid var(--color-line-strong); background: var(--color-bg); }
.of-dev--phone .of-frame { border-radius: 1.1em; }
.of-dev--tab .of-frame { border-radius: .55em; }
.of-dev--tv .of-frame { border-radius: .15em; }
.of-screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--color-line); border-radius: .85em; background: var(--color-bg); }
.of-dev--tab .of-screen { border-radius: .3em; }
/* Telão: linhas de varredura bem leves (o token de scanline do site) */
.of-dev--tv .of-screen { border-radius: 0; background: repeating-linear-gradient(0deg, var(--color-scanline) 0 1px, transparent 1px 4px), var(--color-bg); }
/* Contorno que acende quando o sinal chega (rosa = pedido; verde = pronto) */
.of-flash { position: absolute; z-index: 4; inset: -1px; border: 1px solid currentColor; border-radius: inherit; box-shadow: 0 0 1.1em -.25em currentColor, inset 0 0 1.1em -.5em currentColor; opacity: 0; pointer-events: none; }
.of-flash--orb { color: var(--color-orb); }
.of-flash--ok { color: var(--color-success); }

/* Letra de cada tela: 1 em da tela = o texto de leitura (itens, observações, chips, botões, aviso).
   Celular: 10 px em 360, 11 px em 390. Computador: celular ~11 px, tablet ~13 px, telão ~15 px. */
.of-dev--phone .of-screen, .of-dev--tab .of-screen { font-size: .8em; }
.of-dev--tv .of-screen { font-size: .86em; }

/* Barra de topo das telas (igual à demo: ◇ SALÃO + quem está usando) */
.of-bar { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: .6em; height: 2.3em; padding: 0 .7em; border-bottom: 1px solid var(--color-line); background: var(--color-panel-solid); white-space: nowrap; }
.of-brand { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-mono); font-weight: 700; font-size: .9em; letter-spacing: .24em; text-transform: uppercase; }
.of-logo { width: .85em; height: .85em; border: 1.5px solid var(--color-accent); transform: rotate(45deg); flex-shrink: 0; }
.of-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .9em; color: var(--color-muted); }
.of-wide { display: none; } /* "· Cozinha" e o nome no telão: só no computador */
.of-live { display: flex; align-items: center; gap: .45em; white-space: nowrap; }
.of-live::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
.of-live span { font-family: var(--font-mono); font-weight: 700; font-size: .9em; letter-spacing: .14em; text-transform: uppercase; }
.of-note { font-weight: 600; color: var(--color-exotic); white-space: nowrap; }

/* Toque: um losango que abre e some (o JS anima) */
.of-tap { position: absolute; z-index: 2; left: 50%; top: 50%; width: 2em; height: 2em; margin: -1em 0 0 -1em; border: 1.5px solid var(--color-accent); transform: rotate(45deg) scale(.4); opacity: 0; pointer-events: none; }
/* Sobre botão violeta, o toque usa a cor do texto para aparecer */
.of-send .of-tap, .of-tap--2 { border-color: var(--color-text); }

/* ---------- 1. Celular do garçom ---------- */
/* --of-card-h: altura do cartão (a do rascunho); --of-line-h: um item do rascunho + vão; --of-push: aviso + vão */
.of-dev--phone .of-screen { --of-card-h: 12.5em; --of-line-h: 3.75em; --of-push: 3.4em; }
.of-pmain { position: relative; flex: 1; min-height: 0; padding: .45em .6em; }
.of-pmain > .of-live { height: 1.6em; }
/* Aviso verde de pronto: aparece entre "Ao vivo" e a mesa e empurra o resto para baixo, como na demo.
   "1× Feijoada pronto" vem unido por espaços fixos: no celular estreito (não cabe numa linha) quebra
   limpo em "Mesa 3:" / "1× Feijoada pronto", nunca com "pronto" sozinho embaixo */
.of-alert { position: absolute; left: .6em; right: .6em; top: 2.05em; height: 3em; display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: 0 .6em; border-radius: .3em; background: var(--of-ready-bg); color: var(--of-ready-fg); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.of-alert span { min-width: 0; }
.of-alert u { flex-shrink: 0; text-underline-offset: 2px; }
/* No quadro final o corpo já está empurrado pelo aviso */
.of-pbody { transform: translateY(var(--of-push)); }
.of-table { display: flex; align-items: baseline; justify-content: space-between; height: 2.1em; }
.of-back { font-size: .92em; color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.of-table strong { font-size: 1.4em; font-weight: 700; letter-spacing: -.02em; }

/* Cartão do pedido: "Novo pedido" (rascunho) e "Na comanda" (enviado) ocupam o mesmo lugar */
.of-order { position: relative; display: grid; height: var(--of-card-h); margin-top: .3em; border: 1px solid var(--color-line); border-radius: .35em; background: var(--color-panel-solid); }
.of-order-hl { position: absolute; inset: -1px; border: 1px solid var(--color-accent); border-radius: inherit; opacity: 0; }
.of-draft, .of-ticket { grid-area: 1 / 1; display: grid; align-content: start; row-gap: .25em; min-width: 0; padding: .45em .6em .55em; }
.of-draft { grid-template-rows: 1.4em auto auto 1fr; clip-path: var(--of-wx); } /* já enviado */
.of-ticket { grid-template-rows: 1.4em auto auto; }
.of-otitle { align-self: center; font-size: 1.05em; font-weight: 700; }
/* Rascunho: o item e, embaixo, o campo onde a observação é digitada */
.of-dline { display: grid; grid-template-rows: 1.4em 1.6em; row-gap: .12em; padding-bottom: .3em; border-bottom: 1px solid var(--color-line); }
.of-dname, .of-tname { align-self: center; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-input { display: grid; align-items: center; padding: 0 .45em; border: 1px solid var(--color-line); border-radius: .25em; background: var(--color-bg); overflow: hidden; }
.of-ph, .of-typed { grid-area: 1 / 1; min-width: 0; white-space: nowrap; }
.of-ph { color: var(--color-muted); }
.of-typed { font-weight: 600; color: var(--of-typed); }
.of-send { position: relative; display: grid; place-items: center; align-self: end; height: 2.2em; border-radius: .3em; background: var(--color-accent); color: var(--color-bg); font-weight: 700; white-space: nowrap; }
.of-send-flash { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--color-orb); opacity: 0; }
/* Na comanda: status do garçom (Enviado → Preparando → Pronto) empilhados no mesmo lugar.
   Todos com a mesma largura (a de PREPARANDO, 10 letras em mono), como os botões do tablet: a troca
   acontece dentro da mesma caixa (o antigo some antes de o novo se escrever; veja os estados lá embaixo).
   A linha do suco usa a mesma largura (os dois ENVIADO ficam iguais). */
/* O nome ocupa a linha toda; embaixo, a observação e o status (assim o nome não é cortado no celular) */
.of-tline { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1.5em 1.75em; align-items: center; column-gap: .4em; padding: .15em 0 .35em; border-bottom: 1px solid var(--color-line); }
.of-tline .of-tname { grid-column: 1 / -1; }
/* A observação mantém a cor com que foi digitada (o campo do rascunho fica embaixo, escondido: ≥ 4,5:1 nos dois) */
.of-tline .of-note { grid-column: 1; color: var(--of-typed); }
.of-pchips { grid-area: 2 / 2; display: grid; justify-items: stretch; }
.of-pchip { grid-area: 1 / 1; min-width: calc(10ch + 10 * .04em + .9em); padding: .25em .45em; border-radius: .25em; font-family: var(--font-mono); font-size: .9em; font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.of-pchip--sent { border: 1px solid var(--color-line-strong); }
.of-pchip--prep { background: var(--of-prep-bg); color: var(--of-prep-fg); }
.of-pchip--ready { background: var(--of-ready-bg); color: var(--of-ready-fg); }
.of-tline--1 .of-pchip--sent, .of-tline--1 .of-pchip--prep { opacity: 0; } /* quadro final: pronto */

/* Cardápio (abaixo do pedido): quatro pratos, só o nome */
.of-menu { margin-top: .5em; }
.of-mtitle { height: 1.6em; font-size: 1.05em; font-weight: 700; }
.of-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35em; }
.of-item { position: relative; display: grid; align-content: center; min-width: 0; min-height: 2.8em; padding: .3em .5em; background: var(--color-panel-solid); border: 1px solid var(--color-line); border-radius: .3em; line-height: 1.15; }
.of-hl { position: absolute; inset: -1px; border: 1px solid var(--color-accent); border-radius: inherit; background: var(--color-accent-soft); opacity: 0; }
/* O fim da tela esmaece (a tela continua para baixo; nada parece cortado) */
.of-fade { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 2.2em; background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 0%, transparent), var(--color-bg) 85%); pointer-events: none; }

/* ---------- 2. Tablet da bancada e 3. telão: cartão da mesa ---------- */
.of-tbody, .of-kds { position: relative; flex: 1; display: grid; align-content: start; padding: .5em .55em; }
/* Pedido de antes (Mesa 5, preparando): a cozinha nunca aparece vazia. Fica no lugar do cartão da Mesa 3, por
   baixo dele (mais baixo que ele): o pedido novo entra por cima e, na limpeza, a Mesa 5 volta a aparecer.
   Só com a animação; no quadro final (sem JS e com movimento reduzido) fica escondido */
.of-prev { position: absolute; left: .55em; right: .55em; top: .5em; display: grid; gap: .3em; padding: .4em .6em .45em; background: var(--color-panel-solid); border: 1px solid var(--color-line); border-radius: .25em; visibility: hidden; }
.of-prev strong { display: flex; align-items: center; height: 1.4em; font-size: 1.15em; font-weight: 700; letter-spacing: -.02em; }
.of-prev-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3em .5em; padding-top: .35em; border-top: 1px solid var(--color-line); }
.of-prev-item { font-weight: 600; white-space: nowrap; }
.of-prev-tag { padding: .2em .55em; border-radius: .3em; background: var(--of-prep-bg); color: var(--of-prep-fg); font-family: var(--font-mono); font-size: .8em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.of-card { position: relative; display: grid; padding: .4em .6em .1em; background: var(--color-panel-solid); border: 1px solid var(--color-line); border-radius: .25em; overflow: hidden; }
.of-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--color-accent); }
.of-card-head { display: flex; align-items: center; height: 1.85em; padding-top: .1em; }
.of-card-head strong { font-size: 1.35em; font-weight: 700; letter-spacing: -.02em; }
.of-kline { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .5em; row-gap: .4em; padding: .45em 0 .45em .6em; border-top: 1px solid var(--color-line); }
/* Barrinha da esquerda: cinza → violeta (preparando) → verde (pronto) */
.of-kline::before, .of-kbar { content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 2px; background: var(--color-line-strong); }
.of-kbar--prep { background: var(--color-accent); opacity: 0; }
.of-kbar--ready { background: var(--color-success); }
.of-kname { display: grid; gap: .1em; min-width: 0; }
.of-ktxt { font-weight: 600; white-space: nowrap; }
.of-ktxts { display: grid; }
.of-ktxts > .of-ktxt { grid-area: 1 / 1; }
.of-ktxt--a { opacity: 0; } /* quadro final: pronto (nome apagado, com ✓ no tablet) */
.of-ktxt--b { color: var(--color-muted); }
.of-check { font-style: normal; color: var(--color-success); margin-right: .35em; }

/* Tablet: "Preparar" → "Pronto" (violeta) → link "Desfazer" (item pronto), como na demo.
   Os três ficam empilhados e têm a mesma largura (na demo: largura mínima de 104 px); a caixa .of-acts
   encolhe até eles, então o toque (left: 50%) cai no centro do botão em qualquer largura.
   No layout estreito o botão fica embaixo do item, à esquerda; no largo, à direita. */
.of-dev--tab .of-kline { grid-template-columns: minmax(0, 1fr); }
.of-acts { position: relative; display: grid; justify-self: start; justify-items: stretch; align-items: center; }
.of-acts > span { grid-area: 1 / 1; }
.of-btn { min-width: 6.5em; padding: .42em .75em; border: 1px solid transparent; border-radius: .35em; font-weight: 600; text-align: center; white-space: nowrap; }
.of-btn--prep { border-color: var(--color-line-strong); }
.of-btn--ready { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-bg); font-weight: 700; }
.of-btn--undo { font-weight: 500; color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.of-kline--1 .of-btn--prep, .of-kline--1 .of-btn--ready { opacity: 0; }

/* Telão: letra grande para ler de longe; o item e a observação na mesma linha; só mostra o status */
.of-dev--tv .of-bar { height: 2em; }
.of-dev--tv .of-kds { padding: .45em .65em; }
.of-dev--tv .of-prev { left: .65em; right: .65em; top: .45em; padding-block: .3em; }
.of-dev--tv .of-card { padding: .3em .75em .05em; }
.of-dev--tv .of-card-head { height: 1.6em; }
.of-dev--tv .of-card-head strong { font-size: 1.4em; }
/* vãos um pouco menores que os do tablet: com os chips todos na largura de PREPARANDO, a linha do suco
   ("1× Suco de caju sem gelo") continua numa linha só no computador */
.of-dev--tv .of-kline { column-gap: .4em; padding-block: .3em; }
.of-dev--tv .of-kname { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45em; }
/* Status do telão (NA FILA → PREPARANDO → ✓ PRONTO): mesma largura em toda a pilha e nas duas linhas,
   pelo mesmo motivo dos chips do celular */
.of-chips { display: grid; justify-items: stretch; }
.of-chip { grid-area: 1 / 1; min-width: calc(10ch + 10 * .1em + 1.2em); padding: .25em .6em; border-radius: .3em; font-family: var(--font-mono); font-size: .86em; font-weight: 700; letter-spacing: .1em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.of-chip--queue { border: 1px solid var(--color-line-strong); }
.of-chip--prep { background: var(--of-prep-bg); color: var(--of-prep-fg); }
.of-chip--ready { background: var(--of-ready-bg); color: var(--of-ready-fg); }
.of-kline--1 .of-chip--queue, .of-kline--1 .of-chip--prep { opacity: 0; }

/* ---------- Computador: celular à esquerda; telão (parede) em cima e tablet (bancada) embaixo, à direita.
   O fio sai do celular, chega ao nó central e se divide em dois ramos ---------- */
@container of (min-width: 560px) {
  .of-stage { width: 52em; padding: 1.2em 1em 1em; font-size: min(calc(100cqw / 52), .78125rem); }
  .of-rail { --of-gap: 10px; margin-bottom: 1.2em; padding: 0; font-size: .8125rem; }
  .of-scene { width: 50em; height: 32em; }

  /* Celular e telão alinhados no topo; celular e tablet alinhados embaixo (a bancada passa um pouco) */
  .of-dev--phone { --x: 0em; --y: 0em; --w: 16em; --h: 31em; }
  .of-dev--tv { --x: 19.6em; --y: 0em; --w: 30.4em; --h: 13.6em; }
  .of-dev--tab { --x: 19.6em; --y: 15.7em; --w: 25em; --h: 15.3em; }

  /* P no meio da altura do celular; T e B no meio do telão e do tablet */
  .of [data-node="P"] { --x: 16em; --y: 15.5em; }
  .of [data-node="J"] { --x: 17.8em; --y: 15.5em; }
  .of [data-node="KT"] { display: block; --x: 17.8em; --y: 6.8em; }
  .of [data-node="T"] { --x: 19.6em; --y: 6.8em; }
  .of [data-node="KB"] { --x: 17.8em; --y: 23.35em; }
  .of [data-node="B"] { --x: 19.6em; --y: 23.35em; }
  .of [data-node="K1"] { display: none; }
  .of-seg--pj { display: block; --x: 16em; --y: 15.5em; --w: 1.8em; --s0: scaleX(0); transform-origin: 0 50%; }
  .of-seg--jkt { display: block; --x: 17.8em; --y: 6.8em; --w: 1px; --h: 8.7em; --s0: scaleY(0); transform-origin: 50% 100%; }
  .of-seg--ktt { display: block; --x: 17.8em; --y: 6.8em; --w: 1.8em; --h: 1px; --s0: scaleX(0); transform-origin: 0 50%; }
  .of-seg--jkb { --x: 17.8em; --y: 15.5em; --w: 1px; --h: 7.85em; --s0: scaleY(0); transform-origin: 50% 0; }
  .of-seg--kbb { --x: 17.8em; --y: 23.35em; --w: 1.8em; --h: 1px; --s0: scaleX(0); transform-origin: 0 50%; }
  .of-seg--pk, .of-seg--kj, .of-seg--jt { display: none; }

  .of-dev--phone .of-screen { font-size: .95em; }
  /* Aviso de pronto numa linha só, como na demo (folga lateral um pouco menor) */
  .of-alert { gap: .4em; padding-inline: .45em; }
  .of-dev--tab .of-screen { font-size: 1.1em; }
  .of-dev--tv .of-screen { font-size: 1.3em; }
  .of-wide { display: inline; }
  .of-dev--tv .of-bar > .of-wide { display: block; }
  /* Tablet largo: botão à direita do item, como na demo */
  .of-dev--tab .of-kline { grid-template-columns: minmax(0, 1fr) auto; }
  .of-dev--tab .of-acts { justify-self: end; }
}

/* =====================================================================================================
   Estados da animação. Só com html.of-js (posta no <head>) e movimento liberado; sem isso fica o quadro
   final acima. Especificidade: estado inicial = 3 classes; classes s-* = 4 (o resto vai em :where());
   a limpeza (s-clean) e o recomeço (s-pre) vêm por último e ganham na ordem.
   ===================================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* ----- Entrada (1ª vez na tela): a peça se escreve como a home. Parada até o JS pôr .is-in ----- */
  .of-js .of .of-corner { animation: of-fade .35s var(--of-ease) backwards paused; }
  .of-js .of .of-step-txt:not(.of-step-lit) { animation: of-write .5s var(--of-ease) .1s backwards paused; }
  .of-js .of .of-mark { animation: of-diamond .35s var(--of-ease) .1s backwards paused; }
  .of-js .of .of-link { animation: of-grow-x .6s var(--of-ease) .2s backwards paused; transform-origin: 0 50%; }
  .of-js .of .of-frame { animation: of-line-open .8s var(--of-ease) .1s backwards paused; }
  .of-js .of .of-dev--tab .of-frame { animation-delay: .25s; }
  .of-js .of .of-dev--tv .of-frame { animation-delay: .35s; }
  .of-js .of .of-counter { animation: of-grow-x .6s var(--of-ease) .5s backwards paused; }
  .of-js .of .of-seg { animation: of-seg .45s var(--of-ease) .6s backwards paused; }
  .of-js .of .of-node { animation: of-diamond .35s var(--of-ease) .75s backwards paused; }
  .of-js .of.is-in :is(.of-corner, .of-step-txt, .of-mark, .of-link, .of-frame, .of-counter, .of-seg, .of-node) { animation-play-state: running; }

  /* ----- Estado inicial do ciclo (e o que cada classe s-* muda) ----- */
  /* Trilho */
  .of-js .of .of-step-lit { clip-path: var(--of-w0); transition: clip-path .4s var(--of-ease); }
  .of-js .of.s-lit1 :where(.of-step--1) .of-step-lit,
  .of-js .of.s-arrive :where(.of-step--2) .of-step-lit,
  .of-js .of.s-done :where(.of-step--3) .of-step-lit { clip-path: var(--of-w1); }
  /* A apagada sai no mesmo passo em que a acesa entra (as duas bordas andam juntas, da esquerda para a direita) */
  .of-js .of .of-step-txt:not(.of-step-lit) { visibility: visible; clip-path: var(--of-w1); transition: clip-path .4s var(--of-ease); }
  .of-js .of.s-lit1 :where(.of-step--1) .of-step-txt:not(.of-step-lit),
  .of-js .of.s-arrive :where(.of-step--2) .of-step-txt:not(.of-step-lit),
  .of-js .of.s-done :where(.of-step--3) .of-step-txt:not(.of-step-lit) { clip-path: var(--of-wx); }
  .of-js .of .of-mark i { transform: scale(0); transition: transform .3s var(--of-ease); }
  .of-js .of.s-lit1 :where(.of-step--1) .of-mark i,
  .of-js .of.s-arrive :where(.of-step--2) .of-mark i,
  .of-js .of.s-done :where(.of-step--3) .of-mark i { transform: none; }
  /* os traços enchem no tempo do pulso (--of-go e --of-back vêm do JS) */
  .of-js .of .of-link-fill { transform: scaleX(0); transition: transform var(--of-go, 1s) linear; }
  .of-js .of .of-link-fill--2 { transition-duration: var(--of-back, .7s); }
  .of-js .of.s-sent .of-link-fill--1, .of-js .of.s-ready .of-link-fill--2 { transform: none; }

  /* Celular: o cartão do pedido nasce no 1º toque e o cardápio desce para dar lugar */
  .of-js .of .of-order { clip-path: var(--of-t0); }
  .of-js .of.s-card .of-order { clip-path: none; animation: of-born .55s both; }
  .of-js .of .of-menu { transform: translateY(calc(-1 * (var(--of-card-h) + .3em))); transition: transform .55s var(--of-ease) .05s; }
  .of-js .of.s-card .of-menu { transform: none; }
  .of-js .of .of-order-hl { opacity: 1; transition: opacity .4s ease-out .25s; }
  .of-js .of.s-sent .of-order-hl { opacity: 0; }
  /* Rascunho: itens entram e a observação é digitada dentro do campo */
  .of-js .of .of-draft { clip-path: var(--of-w1); transition: clip-path .3s ease-in; }
  .of-js .of.s-sent .of-draft { clip-path: var(--of-wx); }
  .of-js .of .of-dline { clip-path: var(--of-w0); transition: clip-path .35s var(--of-ease); }
  .of-js .of.s-line1 .of-dline--1, .of-js .of.s-line2 .of-dline--2 { clip-path: var(--of-w1); }
  .of-js .of.s-type1 :where(.of-dline--1) .of-ph, .of-js .of.s-type2 :where(.of-dline--2) .of-ph { opacity: 0; }
  .of-js .of .of-typed { clip-path: var(--of-w0); }
  .of-js .of.s-type1 :where(.of-dline--1) .of-typed { clip-path: var(--of-w1); transition: clip-path .45s steps(9, end); }
  .of-js .of.s-type2 :where(.of-dline--2) .of-typed { clip-path: var(--of-w1); transition: clip-path .4s steps(8, end); }
  /* "Enviar" aparece logo abaixo do 1º item. No toque do suco ele desce e abre a vaga; só depois a linha 2
     se escreve (o botão nunca cobre a linha) */
  .of-js .of .of-send { clip-path: var(--of-w0); transform: translateY(calc(-1 * var(--of-line-h))); transition: clip-path .35s var(--of-ease) .15s, transform .35s var(--of-ease); }
  .of-js .of.s-line1 .of-send { clip-path: var(--of-w1); }
  .of-js .of.s-room2 .of-send { transform: none; }
  /* Enviado: o rascunho sai para a direita e a comanda se escreve no lugar, já com "Enviado". Antes disso
     a comanda fica também invisível (visibility), não só recortada: embaixo do botão violeta do rascunho,
     um verificador automático de contraste (axe) a acusaria mesmo sem ela aparecer */
  .of-js .of .of-ticket > * { visibility: hidden; clip-path: var(--of-w0); transition: clip-path .35s var(--of-ease) var(--d, .2s), visibility 0s linear var(--d, .2s); }
  .of-js .of .of-tline--1 { --d: .26s; }
  .of-js .of .of-tline--2 { --d: .34s; }
  .of-js .of.s-sent .of-ticket > * { visibility: visible; clip-path: var(--of-w1); }
  /* Trocas de status (celular, tablet e telão), sem nunca misturar duas palavras: o antigo esmaece (.1 s,
     parado no lugar) e só DEPOIS o novo se escreve da esquerda (.26 s), na mesma caixa. As duas palavras
     nunca estão na tela ao mesmo tempo (nada de "PREPAR|ADO").
     Estado inicial: o primeiro de cada pilha escrito; os outros ainda por escrever. */
  .of-js .of :where(.of-tline--1, .of-kline--1) :is(.of-pchip, .of-chip, .of-btn),
  .of-js .of :where(.of-dev--tab .of-kline--1) .of-ktxt { opacity: 1; clip-path: var(--of-w0); transition: clip-path .26s var(--of-ease) .1s; }
  .of-js .of :where(.of-tline--1) .of-pchip--sent, .of-js .of :where(.of-kline--1) .of-chip--queue,
  .of-js .of :where(.of-kline--1) .of-btn--prep, .of-js .of :where(.of-dev--tab) .of-ktxt--a { clip-path: var(--of-w1); }
  /* Quem sai (lista única, para os tempos não se separarem) */
  .of-js .of.s-prep-in :where(.of-tline--1) .of-pchip--sent,
  .of-js .of.s-done :where(.of-tline--1) .of-pchip--prep,
  .of-js .of.s-prep :where(.of-kline--1) .of-btn--prep,
  .of-js .of.s-ready :where(.of-kline--1) .of-btn--ready,
  .of-js .of.s-ready :where(.of-dev--tab) .of-ktxt--a,
  .of-js .of.s-prep-in :where(.of-kline--1) .of-chip--queue,
  .of-js .of.s-done :where(.of-kline--1) .of-chip--prep { opacity: 0; transition: opacity .1s ease-in; }
  /* Celular: Enviado → Preparando (quando o pulso do tablet chega) → Pronto */
  .of-js .of.s-prep-in :where(.of-tline--1) .of-pchip--prep,
  .of-js .of.s-done :where(.of-tline--1) .of-pchip--ready { clip-path: var(--of-w1); }
  /* Aviso de pronto: o corpo desce para abrir espaço e o aviso nasce de uma linha no vão */
  .of-js .of .of-alert { clip-path: var(--of-l0); }
  .of-js .of.s-done .of-alert { clip-path: none; animation: of-line-open .55s .12s both; }
  .of-js .of .of-pbody { transform: none; transition: transform .4s var(--of-ease); }
  .of-js .of.s-done .of-pbody { transform: translateY(var(--of-push)); }

  /* Cozinha (tablet e telão): o cartão da Mesa 3 nasce da barra violeta, por cima da Mesa 5 (que some quando
     ele acaba de nascer e volta na limpeza, quando ele sai) */
  .of-js .of .of-prev { visibility: visible; }
  .of-js .of.s-arrive .of-prev { visibility: hidden; transition: visibility 0s linear .7s; }
  .of-js .of.s-clean .of-prev { visibility: visible; transition: none; }
  .of-js .of .of-card { clip-path: var(--of-t0); }
  .of-js .of.s-arrive .of-card { clip-path: none; animation: of-born .55s .05s both; }
  .of-js .of :is(.of-card-head, .of-kline) { clip-path: var(--of-w0); transition: clip-path .4s var(--of-ease) var(--d, .25s); }
  .of-js .of .of-kline--1 { --d: .36s; }
  .of-js .of .of-kline--2 { --d: .5s; }
  .of-js .of.s-arrive :is(.of-card-head, .of-kline) { clip-path: var(--of-w1); }
  /* Tablet: Preparar → Pronto (violeta) → Desfazer; o nome ganha ✓ e fica claro (mesma troca) */
  .of-js .of.s-prep :where(.of-kline--1) .of-btn--ready,
  .of-js .of.s-ready :where(.of-kline--1) .of-btn--undo,
  .of-js .of.s-ready :where(.of-dev--tab) .of-ktxt--b { clip-path: var(--of-w1); }
  .of-js .of .of-kbar { opacity: 0; transition: opacity .25s ease-out; }
  .of-js .of.s-prep :where(.of-dev--tab) .of-kbar--prep,
  .of-js .of.s-ready :where(.of-dev--tab) .of-kbar--ready,
  .of-js .of.s-prep-in :where(.of-dev--tv) .of-kbar--prep,
  .of-js .of.s-done :where(.of-dev--tv) .of-kbar--ready { opacity: 1; }
  .of-js .of.s-done :where(.of-dev--tv) .of-kbar--prep { opacity: 0; }
  /* Telão: acompanha cada toque (NA FILA → PREPARANDO → ✓ PRONTO) e apaga o nome no fim (troca cruzada:
     o nome claro entra enquanto o forte sai, no mesmo lugar) */
  .of-js .of :where(.of-dev--tv) .of-ktxt--a { opacity: 1; }
  .of-js .of :where(.of-dev--tv) .of-ktxt--b { opacity: 0; transition: opacity .4s ease-out; }
  .of-js .of.s-done :where(.of-dev--tv) .of-ktxt--a { opacity: 0; transition: opacity .4s ease-out; }
  .of-js .of.s-done :where(.of-dev--tv) .of-ktxt--b { opacity: 1; }
  .of-js .of.s-prep-in :where(.of-kline--1) .of-chip--prep,
  .of-js .of.s-done :where(.of-kline--1) .of-chip--ready { clip-path: var(--of-w1); }

  /* ----- Limpeza: tudo se apaga para a direita; depois o corpo e o cardápio voltam ao lugar.
     Tudo termina ANTES do recomeço (o JS troca os estados sem transição em T.reset): sem salto. ----- */
  .of-js .of.s-clean .of-step-lit { clip-path: var(--of-wx); transition: clip-path .3s ease-in; }
  /* a apagada volta atrás da acesa; a entrada (of-write) segue na lista, igual, para não recomeçar no reset */
  .of-js .of.s-clean .of-step-txt:not(.of-step-lit) { animation: of-write .5s var(--of-ease) .1s backwards, of-rewrite .3s ease-in both; }
  .of-js .of.s-clean .of-mark i { transform: scale(0); transition: transform .3s ease-in; }
  .of-js .of.s-clean .of-link-fill { opacity: 0; transition: opacity .3s ease-in; }
  .of-js .of.s-clean :is(.of-order, .of-card) { animation: of-wipe .35s ease-in both; }
  .of-js .of.s-clean .of-alert { animation: of-wipe .22s ease-in both; }
  .of-js .of.s-clean .of-pbody { transform: none; transition: transform .5s var(--of-ease-io) .28s; }
  .of-js .of.s-clean .of-menu { transform: translateY(calc(-1 * (var(--of-card-h) + .3em))); transition: transform .55s var(--of-ease-io) .3s; }
  /* Recomeço: por um instante sem transição (o JS põe .of-instant) */
  .of-js .of.of-instant, .of-js .of.of-instant * { transition: none !important; }
}

/* Quadros das entradas e dos estados */
@keyframes of-fade { from { opacity: 0; } }
@keyframes of-write { from { clip-path: var(--of-w0); } to { clip-path: var(--of-w1); } }
/* o mesmo, com outro nome, para a apagada voltar na limpeza (o nome igual ao da entrada não reiniciaria) */
@keyframes of-rewrite { from { clip-path: var(--of-w0); } to { clip-path: var(--of-w1); } }
@keyframes of-diamond { from { transform: rotate(45deg) scale(0); } }
@keyframes of-grow-x { from { transform: scaleX(0); } }
@keyframes of-seg { from { transform: var(--s0); } }
/* nasce de uma linha no meio e abre na altura */
@keyframes of-line-open {
  0% { clip-path: var(--of-l0); animation-timing-function: var(--of-ease); }
  40% { clip-path: inset(calc(50% - .5px) 0 calc(50% - .5px) 0); animation-timing-function: var(--of-ease); }
  100% { clip-path: inset(0 0 0 0); }
}
/* nasce da borda de cima (a barra violeta) e desce como comanda impressa */
@keyframes of-born {
  0% { clip-path: var(--of-t0); animation-timing-function: var(--of-ease); }
  36% { clip-path: inset(0 0 calc(100% - 2px) 0); animation-timing-function: var(--of-ease); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes of-wipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }