/* Lowforge — gaveta do «Practice rig» (amp online) na página principal.
   Sobe de baixo, por cima da barra do metrónomo. O conteúdo vive num iframe
   (/test-amp/?embed=1) que só é carregado na primeira abertura. */
:root{
  --amp-gutter:clamp(20px, 3vw, 56px);                  /* margem lateral do contentor do resto da página (.wrap) */
  --amp-dock:var(--dock-h, 56px);                       /* altura da barra do metrónomo (medida pelo app.js) */
  --amp-h:min(clamp(440px, 60vh, 590px), calc(100dvh - var(--amp-dock) - 8px));
}
html.amp-xl{ --amp-h:calc(100dvh - var(--amp-dock) - 8px); }

/* ── botão na barra do metrónomo: os controlos do metrónomo ficam à esquerda e o botão encosta à direita ── */
.metro-dock-inner{ justify-content:flex-start; }
@media (min-width:721px){
  .metro-dock-inner > .amp-tab{ margin-left:auto; }   /* especificidade acima do .amp-tab{margin:0} que vem a seguir */
}
@media (min-width:721px){
  .metro-dock{ padding-left:0; padding-right:0; }       /* o fundo vai de lado a lado; o conteúdo segue o contentor da página */
  .metro-dock-inner{ max-width:var(--maxw-read, 1450px); padding-left:var(--amp-gutter); padding-right:var(--amp-gutter); }
}
/* Botão físico: face cor de cobre com luz por cima, aresta inferior mais escura (a «espessura») e sombra no chão.
   Hover sobe 1 px e a aresta cresce; ao carregar (e com a gaveta aberta) afunda e a aresta desaparece. */
.amp-tab{
  --amp-edge:#6f4f3a;
  flex:0 0 auto; margin:0; display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 17px 0 15px;
  border:1px solid #c49a7b; border-top-color:#f0d7c2; border-bottom-color:#8a6650; border-radius:999px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.38), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #e9c9ae 0%, #d1aa8d 48%, #b98e70 100%);
  color:#1b130e; cursor:pointer; position:relative; top:-2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(90,58,38,.35),
    0 3px 0 var(--amp-edge),
    0 4px 0 #3b2a1f,
    0 10px 18px -6px rgba(0,0,0,.75),
    0 0 22px -4px rgba(209,170,141,.45);
  font:inherit; -webkit-tap-highlight-color:transparent; text-shadow:0 1px 0 rgba(255,255,255,.28);
  transition:transform .12s ease, box-shadow .12s ease, filter .18s ease, background-color .18s ease;
}
.amp-tab:hover{
  filter:brightness(1.06) saturate(1.05); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 3px rgba(90,58,38,.35),
    0 4px 0 var(--amp-edge),
    0 5px 0 #3b2a1f,
    0 14px 22px -6px rgba(0,0,0,.8),
    0 0 28px -2px rgba(209,170,141,.6);
}
.amp-tab:active, .amp-tab[aria-expanded="true"]{
  transform:translateY(3px); filter:brightness(.97);
  box-shadow:
    inset 0 2px 5px rgba(70,44,28,.55),
    inset 0 -1px 0 rgba(255,255,255,.25),
    0 1px 0 var(--amp-edge),
    0 2px 6px -2px rgba(0,0,0,.7),
    0 0 18px -4px rgba(209,170,141,.4);
}
.amp-tab:focus-visible, .amp-drawer button:focus-visible{ outline:2px solid var(--ember, #D1AA8D); outline-offset:5px; }
.amp-tab svg{ flex:0 0 auto; }
.amp-tab-name{ font-family:var(--font-display, 'Bebas Neue'), sans-serif; font-size:1.25rem; letter-spacing:.07em; line-height:1; padding-top:1px; white-space:nowrap; }
.amp-led{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:#3a201b; box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
  transition:background-color .2s ease, box-shadow .2s ease; }
.amp-led.is-on{ background:#ff4a2e; box-shadow:0 0 8px 2px rgba(255,64,40,.75); }
.amp-tab .amp-led{ background:#5a1f17; box-shadow:inset 0 1px 1px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.35); }
.amp-tab .amp-led.is-on{ background:#ff4a2e; box-shadow:0 0 8px 2px rgba(255,64,40,.75); }

/* ── gaveta ── */
/* A gaveta chega até ao fundo do ecrã e a barra do metrónomo fica por cima dela (ver html.amp-open .metro-dock):
   ao abrir sobe de baixo e passa por baixo da barra; o conteúdo fica por cima da barra (padding-bottom). */
.amp-drawer{
  position:fixed; z-index:78; left:0; right:0; bottom:0;
  height:calc(var(--amp-h) + var(--amp-dock)); padding-bottom:var(--amp-dock); box-sizing:border-box;
  display:flex; flex-direction:column; background:#121212; border-top:1px solid #2a2a2a;
  box-shadow:0 -14px 44px rgba(0,0,0,.6);
  transform:translateY(100%); visibility:hidden;
  transition:transform .38s cubic-bezier(.3,.7,.2,1), height .34s cubic-bezier(.3,.7,.2,1), visibility 0s linear .38s;
}
html.amp-open .amp-drawer{ transform:none; visibility:visible; transition-delay:0s; }
/* a barra do metrónomo passa por cima da gaveta (abrir, aberta e fechar), em todas as larguras */
html.amp-open .metro-dock, html.amp-closing .metro-dock{ z-index:79; }
.amp-drawer-bar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; height:40px; padding:0 clamp(14px, 1.6vw, 28px); border-bottom:1px solid var(--line, #1f1f1f); }
.amp-drawer-title{ display:flex; align-items:center; gap:10px; min-width:0; font-family:var(--font-display, 'Bebas Neue'), sans-serif; font-size:1.3rem; letter-spacing:.07em; line-height:1; color:var(--text, #fff); white-space:nowrap; }
.amp-drawer-sub{ font-family:var(--font-body, sans-serif); font-size:.74rem; letter-spacing:0; color:var(--text-faint, #8a8a8a); overflow:hidden; text-overflow:ellipsis; }
.amp-drawer-actions{ display:flex; align-items:center; gap:4px; }
.amp-btn{ appearance:none; width:34px; height:34px; display:grid; place-items:center; padding:0; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text-muted, #bdb6ad); cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease; }
.amp-btn:hover{ background:var(--surface-3, #212121); color:var(--text, #fff); border-color:var(--line, #1f1f1f); }
.amp-btn svg{ display:block; }
.amp-btn .ic-restore, .amp-btn[aria-pressed="true"] .ic-expand{ display:none; }
.amp-btn[aria-pressed="true"] .ic-restore{ display:block; }
.amp-drawer iframe{ flex:1 1 auto; min-height:0; align-self:center; width:100%; border:0; background:#121212; display:block; color-scheme:dark; }

/* o conteúdo da página sobe com a gaveta (sem a tapar): só no tamanho normal */
html.amp-merged .amp-drawer-bar{ display:none; }
html.amp-open:not(.amp-xl) body > footer{ margin-bottom:var(--amp-h); }
.amp-drawer[inert] iframe{ pointer-events:none; }

/* larguras médias: a barra do metrónomo ainda é uma só linha, por isso o botão perde o texto e o compasso perde a legenda */
@media (min-width:721px) and (max-width:1000px){
  .metro-siglabel{ display:none; }
}
@media (min-width:721px) and (max-width:860px){
  .amp-tab-name{ display:none; }
  .amp-tab{ padding:0 12px; }
}
/* telemóvel (≤ 720 px, ou telemóvel na horizontal): sem Practice rig. A latência, o CPU e a entrada de guitarra não o justificam;
   o rodapé diz que existe em computador. */
.amp-desktop-note{ display:none; }
@media (max-width:720px), (pointer:coarse) and (max-height:500px){
  .amp-tab, .amp-drawer{ display:none !important; }
  footer .wrap > .amp-desktop-note{ display:block; grid-column:1 / -1; grid-row:4; flex:1 1 100%; min-width:0; text-align:left; }
  .metro-dock-inner{ justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .amp-tab, .amp-drawer{ transition:none; }
  .amp-tab:hover{ transform:none; }
}
@media print{ .amp-tab, .amp-drawer{ display:none; } }

/* ── link do teste de latência, ao lado do Practice rig (mesma altura, peso secundário) ── */
.lt-tab{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 15px 0 12px; box-sizing:border-box;
  border:1px solid var(--line, #2a2a2a); border-radius:999px; background:var(--surface-2, #1a1a1a);
  color:var(--text-muted, #bdb6ad); text-decoration:none; font-size:.8rem; font-weight:500; line-height:1; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.lt-tab svg{ flex:0 0 auto; color:var(--ember, #D1AA8D); }
.lt-tab:hover{ color:var(--text, #fff); border-color:var(--ember-dim, #5A4A3D); transform:translateY(-1px); }
.lt-tab:active{ transform:none; }
.lt-tab:focus-visible{ outline:2px solid var(--ember, #D1AA8D); outline-offset:3px; }
@media (min-width:721px){
  .metro-dock-inner > .lt-tab{ margin-left:auto; }
  .metro-dock-inner > .lt-tab + .amp-tab{ margin-left:0; }
}
/* sem espaço para o texto: só o ícone (o nome continua lá para leitores de ecrã e no title) */
@media (min-width:721px) and (max-width:1240px){
  .lt-tab{ width:38px; padding:0; justify-content:center; }
  .lt-tab-name{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
}
/* telemóvel: tal como o rig, não aparece (o teste fica no rodapé) */
@media (max-width:720px), (pointer:coarse) and (max-height:500px){
  .lt-tab{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){ .lt-tab{ transition:none; } }
@media print{ .lt-tab{ display:none; } }