/* Resultado (/result/<job>): título, partitura interativa com a barra de
   reprodução e downloads. Classes criadas pelo player.js (.pa-page, .pa-cursor,
   .marquee, .nh e os estados .pa-status/.pa-error) também moram aqui. O editor
   (/editor) usa editor.css, não este. */

/* Fonte musical da partitura interativa. "PL Musica" é o subconjunto da Bravura
   com os glifos que o site desenha (Bravura-web.ttf, ~45 KB; a lista é
   web_app.BRAVURA_WEB_RANGES e o teste confere este unicode-range). Um glifo
   fora dele cai na Bravura inteira (740 KB), que só baixa nesse caso: o
   unicode-range dela é o resto (sem ele o Chrome a baixa enquanto o
   subconjunto carrega). O SVG pede font-family="Bravura": a última regra põe
   o subconjunto na frente. */
@font-face{font-family:'PL Musica';src:url('/assets/Bravura-web.ttf') format('truetype');font-display:swap;
  unicode-range:U+20,U+E000-E002,U+E030-E032,U+E047-E048,U+E050,U+E05C,U+E062,U+E069-E06A,U+E080-E08B,U+E0A2-E0A4,U+E0A9,U+E1D2-E1DB,U+E1E7,U+E240-E247,U+E260-E264,U+E4A0-E4A4,U+E4AC,U+E4C0-E4C1,U+E4E0-E4F2,U+E520-E525,U+E52B-E52D,U+E535-E536,U+E566,U+E56C}
@font-face{font-family:'Bravura';src:url('/assets/Bravura.ttf') format('truetype');font-display:swap;
  unicode-range:U+0-1F,U+21-DFFF,U+E003-E02F,U+E033-E046,U+E049-E04F,U+E051-E05B,U+E05D-E061,U+E063-E068,U+E06B-E07F,U+E08C-E0A1,U+E0A5-E0A8,U+E0AA-E1D1,U+E1DC-E1E6,U+E1E8-E23F,U+E248-E25F,U+E265-E49F,U+E4A5-E4AB,U+E4AD-E4BF,U+E4C2-E4DF,U+E4F3-E51F,U+E526-E52A,U+E52E-E534,U+E537-E565,U+E567-E56B,U+E56D-10FFFF}
.pa-page text[font-family="Bravura"]{font-family:'PL Musica','Bravura'}

/* ---------- leiaute ----------
   Ordem do HTML = ordem no celular: título, partitura, downloads. No desktop
   título e downloads formam a coluna da esquerda e a partitura ocupa a
   direita nas duas linhas. */
.result{display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto 1fr;
  grid-template-areas:"head viewer" "side viewer";gap:var(--space-5) var(--space-6);
  padding:var(--space-5) 0 var(--space-8);align-items:start}
.rhead{grid-area:head}
.rhead h1{margin:0;font-size:var(--text-xl);line-height:var(--leading-tight);letter-spacing:-.01em;
  overflow-wrap:anywhere}
.rmeta{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--color-text-muted);overflow-wrap:anywhere}
.rmeta span{display:block}
.rside{grid-area:side;display:flex;flex-direction:column;gap:var(--space-4)}
.dl{display:flex;flex-direction:column;gap:var(--space-2)}
.dl-label{margin:0;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-muted)}
.dl .btn{width:100%}
.dl-hint{margin:var(--space-1) 0 0;line-height:var(--leading-normal)}
.rside .notice{margin:0}
/* links soltos com alvo de 44px (não são links dentro de frase) */
.rlinks{display:flex;flex-wrap:wrap;column-gap:var(--space-4);margin-top:calc(-1 * var(--space-3))}
.rlinks a{display:inline-flex;align-items:center;min-height:var(--control-md);font-size:var(--text-sm)}

/* ---------- partitura ---------- */
.viewer2{grid-area:viewer;padding:0;overflow:hidden;display:flex;flex-direction:column;
  height:calc(100vh - var(--header-h) - var(--space-5) * 2);min-height:520px}
/* cabeçalho da partitura: rótulo + a entrada (única) para o editor */
.vhead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);flex:none;min-height:53px}
/* rótulo neutro: diz o que é a área, sem cara de link */
.vhead-label{font-size:var(--text-sm);color:var(--color-text-muted)}
.vhead-actions{display:flex;gap:var(--space-2)}
.vhead-edit,.vhead-pdf{height:var(--control-sm);padding:0 15px;font-size:var(--text-sm)}
/* atalho do PDF: só no celular (no computador os downloads estão na coluna) */
.vhead-pdf{display:none}
.vbody{flex:1;min-height:0;position:relative}
.vbody>.pa-host,.vbody>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}

/* carregando: folha com o papel da partitura, linhas no lugar dos sistemas */
/* margem/padding em % seguem a largura; altura em % segue a folha. O aviso
   "Carregando" fica no lugar do título da folha. */
.pa-skel{width:100%;margin:0 auto;padding:8%;display:flex;flex-direction:column;
  border:1px solid var(--color-border);border-radius:var(--radius-xs);overflow:hidden}
.pa-skel .skeleton{display:block;flex:none;border-radius:var(--radius-xs)}
.pa-skel-staff{width:100%;height:3.2%;margin-top:6%}
.pa-status{position:absolute;left:50%;top:var(--space-12);transform:translateX(-50%);z-index:5;margin:0;
  display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);
  border:1px solid var(--color-border);border-radius:var(--radius-pill);background:#fff;
  box-shadow:var(--shadow-sm);font-size:var(--text-sm);font-weight:var(--weight-semibold);
  color:var(--color-text);white-space:nowrap}
.pa-status .spin{flex:none}
/* erro: aviso com ações (components.css) no lugar da partitura */
.pa-error:empty{display:none}
.pa-error{position:absolute;left:var(--space-4);right:var(--space-4);top:var(--space-10);z-index:5;
  max-width:440px;margin:0 auto}
.pa-error .notice{box-shadow:var(--shadow-sm)}

/* ---------- barra de reprodução ---------- */
.transport{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);
  padding:var(--space-2) var(--space-3);border-top:1px solid var(--color-border);flex:none}
.tbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:var(--control-md);height:var(--control-md);border-radius:50%;border:0;
  background:var(--color-primary);color:var(--color-on-primary);cursor:pointer}
.tbtn:hover{background:var(--color-primary-hover)}
.tbtn:disabled{opacity:.6;cursor:not-allowed}
.tbtn .i-pause,.tbtn[data-playing="true"] .i-play{display:none}
.tbtn[data-playing="true"] .i-pause{display:block}
/* posição: alvo de 24px (44 no celular) com o trilho de 8px no meio */
.pl-bar{position:relative;height:24px;cursor:pointer;border-radius:var(--radius-xs)}
.pl-bar::before,.pl-fill{content:"";position:absolute;left:0;top:50%;height:8px;margin-top:-4px;border-radius:5px}
.pl-bar::before{right:0;background:#e4e7f7}
.pl-fill{width:0;background:var(--color-primary)}
.transport .pl-bar{flex:1 1 120px;min-width:96px}
.t-pos{flex:none;display:flex;flex-direction:column;min-width:96px;font-size:var(--text-xs);
  line-height:1.4;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.t-time{color:var(--color-text);font-weight:var(--weight-semibold)}
.t-ctl{flex:none;display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-sm);
  font-size:var(--text-sm);color:var(--color-text-muted);cursor:pointer}
.t-ctl svg{flex:none}
.t-ctl input[type=range]{width:84px;height:24px;margin:0;accent-color:var(--color-primary);cursor:pointer}
.t-val{min-width:4ch;font-variant-numeric:tabular-nums}
.t-ctl input[type=checkbox]{width:24px;height:24px;margin:0;accent-color:var(--color-primary);cursor:pointer}
.t-ctl select{height:var(--control-sm);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);
  background:#fff;color:var(--color-text);font:inherit;font-size:var(--text-sm);padding:0 var(--space-2);cursor:pointer}

/* ---------- partitura interativa (classes do player.js) ---------- */
.pa-host{height:100%;overflow:auto;background:#fff;padding:var(--space-2);position:relative;
  user-select:none;-webkit-user-select:none}
/* a área rola com o teclado (Tab + setas): o anel fica por dentro, porque o
   painel corta o que passa da borda */
.pa-host:focus-visible{outline-offset:-3px}
/* retângulo de seleção por arrasto (estilo Encore) */
.marquee{position:absolute;border:1.5px dashed var(--color-primary);
  background:rgba(79,70,229,.08);border-radius:3px;z-index:4;pointer-events:none}
.pa-page{position:relative;margin:0 auto 10px;width:100%}
.pa-page svg{display:block;width:100%;height:auto}
.pa-cursor{position:absolute;width:2.5px;border-radius:2px;background:var(--color-primary);
  opacity:.6;pointer-events:none;display:none;top:0;left:0}
.nh{pointer-events:none}
.pa-host.editing .nh{pointer-events:auto;cursor:pointer}
.pa-host.editing.drawing{cursor:crosshair}
.pa-host.editing.drawing .nh{cursor:crosshair}
.pa-host.editing .nh:hover{fill:var(--color-primary);fill-opacity:.14}
.nh.sel{fill:var(--color-primary);fill-opacity:.3;stroke:var(--color-primary);stroke-width:1}

/* ---------- celular: a partitura na primeira tela ----------
   Título compacto, partitura de ponta a ponta (mais larga = notas maiores)
   com altura que deixa a barra de reprodução visível; downloads depois. */
@media(max-width:820px){
  .result{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    grid-template-areas:"head" "viewer" "side";row-gap:var(--space-3);padding-top:var(--space-3)}
  .rhead h1{font-size:var(--text-lg)}
  .rmeta{margin-top:var(--space-1);font-size:var(--text-xs)}
  .rsrc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .viewer2{margin:0 calc(-1 * var(--gutter));border-radius:0;border-left:0;border-right:0;
    height:auto;min-height:0}
  .vhead{min-height:0}
  /* "Baixar PDF" e "Editar partitura" lado a lado, metade cada; o rótulo sai */
  .vhead-label{display:none}
  .vhead-actions{flex:1}
  .vhead-edit,.vhead-pdf{display:inline-flex;flex:1 1 0;height:var(--control-md);padding:0 var(--space-3)}
  .vbody{flex:none;height:max(280px,calc(100vh - 430px));height:max(280px,calc(100svh - 430px))}
  .pa-host{padding:var(--space-1)}
  .pa-status{top:var(--space-2)}
  .pa-error{top:var(--space-6)}
  /* três linhas: tocar + posição; velocidade + metrônomo; som */
  .transport{gap:var(--space-1) var(--space-3);padding:var(--space-1) var(--space-3) var(--space-2)}
  .pl-bar{height:var(--control-md)}
  .t-ctl{min-height:var(--control-md)}
  .t-speed{flex:1 1 auto}
  .t-speed input[type=range]{flex:1;width:auto;min-width:0;height:var(--control-md)}
  .t-ctl select{height:var(--control-md)}
  .rside{padding-top:var(--space-2)}
}