/* Orihon — o pedido de horário como um livro sanfonado (padrão do design system Nanquim).
   Só o que é do livro mora aqui: palco, folhas, páginas e a sequência do envio. Os controles são os componentes
   do sistema (nq-campo, nq-check, nq-pranchas, nq-cal, nq-horas, nq-regua, nq-corpo, nq-btn), que medem em --nq-u:
   o livro escala inteiro trocando só essa unidade. As páginas são papel: data-theme="washi". */

.ori-sala{max-width:1240px;margin:0 auto;padding:40px var(--nq-gutter) 56px;display:grid;gap:24px}
/* no celular o livro ocupa quase toda a largura: 16px de margem, para cada página caber inteira */
@media (max-width:759px){.ori-sala{padding-inline:16px}}
.ori-sala__topo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 24px}
.ori-sala__nome{display:flex;gap:14px;align-items:baseline}
.ori-sala__nome b{font:400 15px/1 var(--font-jp);color:var(--nq-accent)}
.ori-sala__nome span{font:400 20px/1 var(--font-sala);letter-spacing:.08em;text-transform:uppercase}
.ori-sala h1{margin:8px 0 0;font:400 clamp(34px,5vw,56px)/1 var(--font-display)}
.ori-sala h1 em{font-style:italic;color:var(--nq-accent)}
.ori-sala__aviso{margin:0;font-size:13px;color:var(--nq-text-muted);max-width:42ch}
.ori-sala__abrir{justify-self:center;transition:opacity 300ms var(--nq-ease-tinta),transform 300ms var(--nq-ease-tinta)}
.ori-sala__abrir[hidden]{display:none}
.ori-sala__abrir.is-saindo{opacity:0;pointer-events:none}

/* ---------- palco ---------- */
.ori-vista{width:100%;display:flex;justify-content:center}
.ori{position:relative;overflow:hidden;touch-action:manipulation}
.ori>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ori__capa{position:absolute;border:0;padding:0;background:none;cursor:pointer}
.ori__capa:focus-visible{outline:2px solid var(--nq-focus);outline-offset:4px}
.ori-pg{position:absolute;left:0;top:0;width:calc(var(--nq-u) * 450);height:calc(var(--nq-u) * 604);transform-origin:0 0;overflow:hidden;visibility:hidden;
  background:var(--nq-surface);color:var(--nq-text)}
.ori-pg__sombra{position:absolute;inset:0;background:var(--nq-sumi);opacity:0;pointer-events:none;z-index:5}
.ori-pg__in{position:absolute;inset:0}
.ori-pg :focus-visible{outline:2px solid var(--nq-focus);outline-offset:2px}

/* ---------- página esquerda: a etapa ---------- */
.ori-esq{position:absolute;inset:0;padding:calc(var(--nq-u) * 40) calc(var(--nq-u) * 40) 0}
.ori-esq__folio{display:flex;justify-content:space-between;align-items:center;font:400 calc(var(--nq-u) * 18)/1 var(--font-sala);letter-spacing:.08em;color:var(--nq-text-muted)}
/* trilha: seis pinceladas curtas; as feitas em nanquim, a atual em vermelho (mais longa), as próximas em traço claro */
.ori-trilha{display:flex;gap:calc(var(--nq-u) * 4);align-items:center}
.ori-trilha i{display:block;width:calc(var(--nq-u) * 16);height:calc(var(--nq-u) * 5);background:var(--nq-border);clip-path:polygon(0 35%,8% 0,100% 18%,94% 100%,6% 82%);transform-origin:left center}
.ori-trilha i.is-feita{background:var(--nq-text)}
.ori-trilha i.is-atual{width:calc(var(--nq-u) * 28);background:var(--nq-accent-fill)}
.ori-esq__nome{margin:calc(var(--nq-u) * 26) 0 0;font:400 calc(var(--nq-u) * 64)/.92 var(--font-sala);letter-spacing:.01em;text-transform:uppercase}
.ori-esq__q{margin:calc(var(--nq-u) * 14) 0 0;font:400 italic calc(var(--nq-u) * 30)/1.1 var(--font-display)}
.ori-esq__dica{margin:calc(var(--nq-u) * 12) 0 0;max-width:20em;font:400 calc(var(--nq-u) * 17)/1.45 var(--font-ui);color:var(--nq-text-muted)}
.ori-esq__kj{position:absolute;right:calc(var(--nq-u) * -24);bottom:calc(var(--nq-u) * -70);font:400 calc(var(--nq-u) * 360)/1 var(--font-kanji);color:var(--nq-text);pointer-events:none;user-select:none}
.ori-esq--fim .ori-esq__kj{color:var(--nq-accent-fill)}
/* palavra de dois kanji (部位, 寸法, 日時, 連絡): os dois lado a lado, menores, ainda cortados pela borda de baixo */
.ori-esq__kj--duplo{right:calc(var(--nq-u) * -16);bottom:calc(var(--nq-u) * -46);font-size:calc(var(--nq-u) * 228);letter-spacing:-.04em}

/* ---------- página direita: um <form> por página ---------- */
.ori-dir{position:absolute;inset:0;margin:0;padding:calc(var(--nq-u) * 34) calc(var(--nq-u) * 34) calc(var(--nq-u) * 26);display:grid;grid-template-rows:auto 1fr auto;gap:calc(var(--nq-u) * 14)}
.ori-dir__corpo{min-height:0;display:grid;align-content:start;gap:calc(var(--nq-u) * 14);margin:0;padding:0;border:0;min-width:0}
.ori-dir__nav{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--nq-u) * 12)}
.ori-dir__nav .nq-btn{font-size:max(15px,calc(var(--nq-u) * 20));min-height:max(44px,calc(var(--nq-u) * 56));padding:0 calc(var(--nq-u) * 26)}
.ori-dir__nav .nq-btn--fantasma{padding-inline:4px;font-size:max(14px,calc(var(--nq-u) * 18))}
.ori-dir__nav .nq-btn--fantasma::after{display:none}
.ori-dir__nav .is-vazio{visibility:hidden}
.ori-dir__cab{outline:0}
.ori:not(.is-mob) .ori-dir__cab{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.is-mob .ori-dir{padding:calc(var(--nq-u) * 20) calc(var(--nq-u) * 28) calc(var(--nq-u) * 18);gap:calc(var(--nq-u) * 12)}
.is-mob .ori-dir__cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px calc(var(--nq-u) * 10);padding-bottom:calc(var(--nq-u) * 8);border-bottom:1px solid var(--nq-border)}
.ori-dir__cab>b{font:400 calc(var(--nq-u) * 34)/1 var(--font-kanji);align-self:center}
.ori-dir__cab h2{margin:0;font:400 calc(var(--nq-u) * 26)/1 var(--font-sala);text-transform:uppercase;letter-spacing:.02em}
.ori-dir__cab p{margin:0;flex:1;min-width:0;font:400 italic max(15px,calc(var(--nq-u) * 19))/1.1 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ori-dir__cab small{font:400 max(12px,calc(var(--nq-u) * 15))/1 var(--font-sala);letter-spacing:.08em;color:var(--nq-text-muted)}
.ori-rot{margin:0;font:600 max(11px,calc(var(--nq-u) * 12))/1.3 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--nq-text-muted)}
.ori-link{border:0;padding:calc(var(--nq-u) * 8) 0;cursor:pointer;color:var(--nq-text);font:400 max(13px,calc(var(--nq-u) * 15))/1 var(--font-sala);letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(currentColor,currentColor) left calc(100% - var(--nq-u) * 4)/0 1px no-repeat;transition:background-size 280ms var(--nq-ease-tinta)}
.ori-link:hover,.ori-link:focus-visible{background-size:100% 1px}
.ori-link[hidden]{display:none}

/* ajustes de encaixe: cada página cabe inteira, sem rolagem, de 360px ao desktop grande */
.ori-pg .nq-dia{height:calc(var(--nq-u) * 38)}
.ori-pg .nq-check{min-height:0}
.ori-pg textarea.nq-input{height:calc(var(--nq-u) * 72);min-height:0;resize:none}
.is-mob .nq-dia{height:calc(var(--nq-u) * 35)}
.is-mob .nq-hora span{min-height:max(36px,calc(var(--nq-u) * 46))}
.is-mob .nq-cal{gap:calc(var(--nq-u) * 4)}
.is-mob textarea.nq-input{height:calc(var(--nq-u) * 50)}
.is-mob .nq-input{min-height:max(38px,calc(var(--nq-u) * 44));padding-block:calc(var(--nq-u) * 8)}
.is-mob .nq-campo{gap:calc(var(--nq-u) * 3)}
.is-mob .nq-prancha-op__img,.is-mob .nq-prancha-op__vazio{aspect-ratio:1}
.is-mob .nq-pranchas{column-gap:calc(var(--nq-u) * 7)}
.ori-pg .nq-corpo{--nq-corpo-alt:calc(var(--nq-u) * 282)}
.is-mob .nq-corpo{--nq-corpo-alt:calc(var(--nq-u) * 236)}

/* 1 · motivo: sempre 4 colunas no livro (a grade do sistema é responsiva; aqui a página já escala) */
.ori-pg .nq-pranchas{--nq-pranchas-col:repeat(4,minmax(0,1fr))}

/* 2 · região */
.ori-regiao__fim{display:grid;grid-template-columns:1fr auto;gap:calc(var(--nq-u) * 6) calc(var(--nq-u) * 12);align-items:center}
.ori-regiao__lista{margin:0;font:400 max(13px,calc(var(--nq-u) * 15))/1.35 var(--font-ui);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.is-mob .ori-regiao__lista{-webkit-line-clamp:1}
.ori-regiao__lista:empty::before{content:"Nada pintado ainda.";color:var(--nq-text-muted)}

/* 6 · envio */
.ori-resumo{display:grid;margin:0;border-top:1px solid var(--nq-border)}
.ori-resumo div{display:grid;grid-template-columns:calc(var(--nq-u) * 104) 1fr;gap:calc(var(--nq-u) * 10);padding:calc(var(--nq-u) * 9) 0;border-bottom:1px solid var(--nq-border)}
.ori-resumo dt{font:600 max(10px,calc(var(--nq-u) * 11))/1.5 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--nq-text-muted)}
.ori-resumo dd{margin:0;font-size:max(13px,calc(var(--nq-u) * 16));line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ori-fim{display:grid;gap:calc(var(--nq-u) * 12);align-content:start}
.ori-fim h3{margin:0;font:400 calc(var(--nq-u) * 42)/1 var(--font-display)}
.ori-fim h3 em{font-style:italic;color:var(--nq-accent)}
.ori-fim p{margin:0;font-size:max(14px,calc(var(--nq-u) * 17));color:var(--nq-text-muted)}
.ori-fim__proto{font:400 calc(var(--nq-u) * 36)/1 var(--font-sala);letter-spacing:.06em}
.ori-selo{position:absolute;right:calc(var(--nq-u) * 34);bottom:calc(var(--nq-u) * 34);width:calc(var(--nq-u) * 130);transform:rotate(-4deg)}
.ori-aneis{position:absolute;right:calc(var(--nq-u) * -6);bottom:calc(var(--nq-u) * -6);width:calc(var(--nq-u) * 210);height:calc(var(--nq-u) * 210);pointer-events:none;opacity:0;background:var(--nq-text);
  -webkit-mask:var(--nq-m-aneis) center/contain no-repeat;mask:var(--nq-m-aneis) center/contain no-repeat;transform:scale(.2)}

/* ---------- movimento do livro ---------- */
.ori-trilha i{transition:background-color var(--nq-dur-base),width var(--nq-dur-base) var(--nq-ease-tinta)}
@media (prefers-reduced-motion:no-preference){
  /* chegada da sala e do livro */
  .ori-sala__topo>*{animation:nq-sobe 700ms var(--nq-ease-tinta) backwards}.ori-sala__topo>*+*{animation-delay:120ms}
  .ori-vista{animation:ori-entra 1000ms var(--nq-ease-tinta) 180ms backwards}
  .ori-sala__abrir{animation:nq-sobe 600ms var(--nq-ease-tinta) 700ms backwards}
  .ori-sala__abrir.is-saindo{transform:translateY(8px)}
  @keyframes ori-entra{from{opacity:0;transform:translateY(28px) scale(.985)}}
  /* a capa levanta um pouco sob o cursor, convidando a abrir */
  .ori{transition:transform 520ms var(--nq-ease-tinta)}
  .ori.is-fechado:has(.ori__capa:hover),.ori.is-fechado:has(.ori__capa:focus-visible),.ori.is-fechado.is-convida{transform:translateY(-6px)}
  /* a pincelada da etapa atual se desenha */
  .ori-trilha i.is-atual{animation:ori-traco 700ms var(--nq-ease-escreve) 750ms backwards}
  @keyframes ori-traco{from{transform:scaleX(0)}}
  /* navegação */
  .ori-seta{display:inline-block;transition:transform 260ms var(--nq-ease-tinta)}
  [data-acao="voltar"]:hover .ori-seta,[data-acao="voltar"]:focus-visible .ori-seta{transform:translateX(-4px)}
  [data-horas]>*{animation:nq-sobe 360ms var(--nq-ease-tinta) both}
  /* envio: o resumo afunda, o selo cai, a água abre em anéis e o recibo aparece */
  .is-enviando .ori-resumo div,.is-enviando .nq-check{animation:ori-afunda 420ms cubic-bezier(.4,0,.2,1) both}
  .is-enviando .ori-resumo div:nth-child(2){animation-delay:50ms}.is-enviando .ori-resumo div:nth-child(3){animation-delay:100ms}.is-enviando .ori-resumo div:nth-child(4){animation-delay:150ms}.is-enviando .ori-resumo div:nth-child(5){animation-delay:200ms}.is-enviando .nq-check{animation-delay:250ms}
  @keyframes ori-afunda{to{opacity:.18;transform:translateY(calc(var(--nq-u) * 3))}}
  .is-recibo .ori-fim>*{animation:ori-sobe-fim 560ms var(--nq-ease-tinta) both}
  .is-recibo .ori-fim h3{animation:ori-escreve 900ms cubic-bezier(.65,0,.35,1) 520ms both;-webkit-mask:linear-gradient(90deg,#000 40%,transparent 60%) 100% 0/250% 100% no-repeat;mask:linear-gradient(90deg,#000 40%,transparent 60%) 100% 0/250% 100% no-repeat}
  .is-recibo .ori-fim__proto{animation-delay:760ms}.is-recibo .ori-fim p{animation-delay:980ms}
  @keyframes ori-escreve{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
  @keyframes ori-sobe-fim{from{opacity:0;transform:translateY(calc(var(--nq-u) * 10))}}
  .is-recibo .ori-selo{animation:ori-cai 560ms cubic-bezier(.3,0,.25,1) both}
  @keyframes ori-cai{0%{opacity:0;transform:translateY(calc(var(--nq-u) * -26)) rotate(-16deg) scale(1.9)}62%{opacity:1;transform:rotate(-3deg) scale(.93)}78%{transform:rotate(-4.5deg) scale(1.02)}100%{opacity:1;transform:rotate(-4deg) scale(1)}}
  .is-recibo .ori-aneis{animation:ori-abre 1400ms cubic-bezier(.15,.7,.25,1) 340ms both}
  .is-recibo .ori-aneis+.ori-aneis{animation-delay:470ms;animation-duration:1700ms}
  @keyframes ori-abre{0%{opacity:.4;transform:scale(.2)}60%{opacity:.16}100%{opacity:0;transform:scale(2.1)}}
  .is-baque .ori-pg__in{animation:ori-baque 260ms cubic-bezier(.3,0,.3,1) 340ms both}
  @keyframes ori-baque{40%{transform:translateY(calc(var(--nq-u) * 2.5)) scale(.996)}}
  .ori-esq--recibo .ori-esq__kj{animation:ori-tinge 900ms ease 380ms both}
  @keyframes ori-tinge{from{color:var(--nq-text)}to{color:var(--nq-accent-fill)}}
  .ori-esq--recibo .ori-esq__q,.ori-esq--recibo .ori-esq__dica{animation:ori-sobe-fim 560ms var(--nq-ease-tinta) 420ms both}
  .ori-esq--recibo .ori-esq__dica{animation-delay:540ms}
}
@media (prefers-reduced-motion:reduce){.ori-aneis{display:none}}