/* Lowforge — círculo das quintas para afinações Drop (js/circle.js) */

.cf{ max-width:var(--maxw-read); padding-top:28px; padding-bottom:56px; }  /* mesma largura do restante conteúdo centrado (home) */
.cf-head{ max-width:720px; margin-bottom:26px; }
.cf-kicker{ margin:0 0 6px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ember); }
.cf-head h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.4rem, 5vw, 3.6rem); line-height:1; margin:0 0 12px; letter-spacing:.01em; }
.cf-lead{ margin:0; color:var(--text-muted); font-size:.98rem; line-height:1.6; }

/* controlos */
.cf-controls{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap:16px 20px; align-items:end; margin-bottom:18px; }
.cf-label{ display:block; font-size:.74rem; font-weight:500; letter-spacing:.04em; color:var(--label); margin-bottom:7px; }
.cf-ghost{ width:100%; background:transparent; border:1px solid var(--ember-dim); color:var(--text); border-radius:999px;
  padding:10px 14px; font-size:.86rem; transition:border-color .15s, background-color .15s; }
.cf-ghost:hover{ border-color:var(--ember); background:rgba(209,170,141,.06); }

/* modos: régua do mais brilhante ao mais escuro */
.cf-modes{ margin-bottom:28px; }
.cf-modes-scale{ display:flex; justify-content:space-between; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint);
  padding:0 2px 6px; position:relative; }
.cf-modes-row{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; position:relative; }
.cf-modes-row::before{ content:''; position:absolute; left:0; right:0; top:-3px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, #e8d6c6, var(--ember) 45%, #3a2f27); opacity:.8; }
.cf-mode{ position:relative; background:var(--surface-2); border:1px solid var(--line); color:var(--text-muted); border-radius:0;
  padding:10px 6px 9px; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0;
  transition:border-color .15s, background-color .15s, color .15s; }
.cf-mode:hover{ border-color:var(--ember-dim); color:var(--text); }
.cf-mode .m-name{ font-size:.86rem; font-weight:600; white-space:nowrap; }
.cf-mode .m-char{ font-size:.74rem; color:var(--text-faint); }
.cf-mode.is-metal::after{ content:''; position:absolute; top:6px; right:6px; width:5px; height:5px; border-radius:50%; background:var(--ember); opacity:.7; }
.cf-mode.active{ background:var(--ember); border-color:var(--ember); color:#121212; }
.cf-mode.active .m-char{ color:#3b2e24; }
.cf-mode.active.is-metal::after{ background:#121212; }

/* layout principal */
.cf-grid{ display:grid; grid-template-columns:minmax(0, 560px) minmax(0, 1fr); gap:36px; align-items:start; }
.cf-wheel{ min-width:0; }
#cfSvg{ display:block; width:100%; height:auto; max-width:560px; margin:0 auto; touch-action:manipulation; }
#cfSvg:focus{ outline:none; }   /* sem contorno ao clicar (o Safari mostra-o sempre) */
#cfSvg:focus-visible{ outline:2px solid var(--ember); outline-offset:6px; border-radius:50%; }   /* só com teclado */
#cfSvg .cf-seg, #cfSvg .cf-seg *{ outline:none; -webkit-tap-highlight-color:transparent; }
#cfSvg{ -webkit-tap-highlight-color:transparent; }

.cf-seg{ cursor:pointer; }
.cf-seg path{ fill:#161616; stroke:var(--bg); stroke-width:2.5; transition:fill .25s; }
.cf-seg:hover path{ fill:#222; }
.cf-seg text{ text-anchor:middle; dominant-baseline:central; pointer-events:none; user-select:none; }
.cf-seg .t-main{ font-family:var(--font-display); fill:#8c8c8c; letter-spacing:.02em; transition:fill .25s; }
.cf-seg.ring-1 .t-main, .cf-seg.ring-2 .t-main{ font-family:var(--font-body); font-weight:600; }
.cf-seg .t-sec{ fill:#6d6d6d; }
.cf-seg .t-sec.is-rn{ font-weight:700; fill:var(--ember); letter-spacing:.02em; }
.cf-seg.in-key path{ fill:#2a2622; }
.cf-seg.in-key:hover path{ fill:#332d28; }
.cf-seg.in-key .t-main{ fill:#fff; }
.cf-seg.is-tonic path{ fill:var(--ember); }
.cf-seg.is-tonic:hover path{ fill:#dcb99e; }
.cf-seg.is-tonic .t-main, .cf-seg.is-tonic .t-sec{ fill:#121212; }
.cf-seg.is-hot path{ fill:#f0d9c6; }
.cf-seg.is-hot .t-main, .cf-seg.is-hot .t-sec{ fill:#121212; }

.cf-wedge{ fill:none; stroke:var(--ember); stroke-width:2.5; stroke-linejoin:round; pointer-events:none; }
.cf-open{ fill:var(--ember); pointer-events:none; }
.cf-tri{ fill:none; stroke:#bdbdbd; stroke-width:1.5; stroke-dasharray:5 4; pointer-events:none; opacity:.75; }
.t-sig{ font-size:12px; fill:#6d6d6d; text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.t-sig.on{ fill:var(--ember); font-weight:600; }
.cf-hub{ fill:#141414; stroke:var(--line); }
.c-ton{ font-family:var(--font-display); font-size:58px; fill:#fff; text-anchor:middle; dominant-baseline:central; }
.c-mode{ font-size:15px; font-weight:600; fill:var(--ember); text-anchor:middle; dominant-baseline:central; letter-spacing:.04em; text-transform:uppercase; }
.c-sig{ font-size:11px; fill:var(--text-faint); text-anchor:middle; dominant-baseline:central; }

.cf-legend{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin:14px 0 6px; padding:0; font-size:.78rem; color:var(--text-faint); }
.cf-legend li{ display:flex; align-items:center; gap:7px; }
.cf-legend i{ display:inline-block; width:16px; height:10px; border-radius:2px; }
.lg-key{ background:#2a2622; outline:2px solid var(--ember); outline-offset:-2px; }
.lg-tonic{ background:var(--ember); }
.lg-open{ height:4px !important; background:var(--ember); }
.lg-tri{ border:1.5px dashed #bdbdbd; height:10px; }
.cf-hint{ text-align:center; font-size:.8rem; color:var(--text-faint); margin:4px 0 0; }

/* coluna lateral */
.cf-side{ min-width:0; display:flex; flex-direction:column; gap:26px; }
.cf-summary h2{ font-family:var(--font-display); font-weight:400; font-size:2.4rem; line-height:1; margin:0 0 6px; }
.cf-sub{ margin:0 0 8px; color:var(--ember); font-size:.86rem; }
.cf-desc{ margin:0 0 14px; color:var(--text-muted); font-size:.92rem; line-height:1.55; }
.cf-notes{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.cf-notes li{ display:flex; flex-direction:column; align-items:center; min-width:46px; padding:6px 8px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--line); }
.cf-notes b{ font-size:.98rem; font-weight:600; }
.cf-notes span{ font-size:.7rem; color:var(--text-faint); }
.cf-notes li.is-root{ border-color:var(--ember); }
.cf-notes li.is-root b{ color:var(--ember); }
.cf-notes li.is-char{ background:rgba(209,170,141,.12); border-color:var(--ember-dim); }
.cf-notes li.is-char span{ color:var(--ember); }

.cf-block h3{ font-family:var(--font-display); font-weight:400; font-size:1.35rem; letter-spacing:.02em; margin:0 0 10px; }
.cf-chords{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; }
.cf-chord{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--text);
  padding:9px 4px 8px; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0;
  transition:border-color .15s, background-color .15s, transform .12s; }
.cf-chord:hover{ border-color:var(--ember-dim); }
.cf-chord:active{ transform:scale(.96); }
.cf-chord .c-rn{ font-size:.78rem; font-weight:600; color:var(--ember); }
.cf-chord .c-nm{ font-size:1.1rem; font-weight:700; line-height:1.2; white-space:nowrap; }
.cf-chord .c-fr{ font-size:.66rem; color:var(--text-faint); white-space:nowrap; }
.cf-chord.is-tonic{ border-color:var(--ember); }
.cf-chord.q-dim .c-nm{ color:var(--text-faint); }
.cf-chord.is-hot{ background:var(--ember); border-color:var(--ember); }
.cf-chord.is-hot .c-rn, .cf-chord.is-hot .c-nm, .cf-chord.is-hot .c-fr{ color:#121212; }

/* corda grave, trastes 0–12 */
.cf-frets-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:14px; }
.cf-frets{ display:grid; grid-template-columns:repeat(13, minmax(34px, 1fr)); min-width:440px; position:relative; }
.cf-frets::before{ content:''; position:absolute; left:0; right:0; top:39px; height:3px; background:linear-gradient(#cfcfcf, #8d8d8d); border-radius:2px; }
.fr{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; border-right:2px solid var(--fret-wire); padding-bottom:6px; }
.fr.nut{ border-right:5px solid #d8d0c4; }
.fr.dot::after, .fr.dot2::after{ content:''; position:absolute; bottom:-8px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#4a4a4a; }
.fr.dot2::after{ box-shadow:-5px 0 0 #4a4a4a; margin-left:0; }
.fr-n{ font-size:.66rem; color:var(--text-faint); height:14px; line-height:14px; }
.fr-m, .fr-e{ position:relative; z-index:1; width:30px; height:30px; margin:3px 0 0; }
.fr-m{ border-radius:50%; border:0; background:#e9e9e9; color:#121212; font-size:.7rem; font-weight:700; padding:0;
  transition:transform .12s, background-color .15s; }
.fr-m:hover{ transform:scale(1.08); }
.fr-m.is-tonic{ background:var(--ember); }
.fr-m.q-dim{ background:#5d5d5d; color:#eee; }
.fr-m.is-hot{ background:#fff; box-shadow:0 0 0 4px rgba(209,170,141,.45); }
.fr-c{ font-size:.74rem; color:var(--text-muted); min-height:1.2em; }
.cf-note{ margin:12px 0 0; font-size:.8rem; line-height:1.55; color:var(--text-faint); }

.cf-link{ align-self:flex-start; color:var(--ember); text-decoration:none; font-weight:600; font-size:.9rem;
  border-bottom:1px solid var(--ember-dim); padding-bottom:2px; }
.cf-link:hover{ border-color:var(--ember); }

/* progressões */
.cf-prog{ margin-top:52px; padding-top:30px; border-top:1px solid var(--line); }
.cf-prog-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px 32px; flex-wrap:wrap; margin-bottom:18px; }
.cf-prog-head h2{ font-family:var(--font-display); font-weight:400; font-size:2rem; margin:0; line-height:1; }
.cf-prog-head .cf-note{ margin-top:8px; max-width:560px; }
.cf-prog-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.cf-pc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px 14px; display:flex; flex-direction:column; gap:6px;
  transition:border-color .2s; }
.cf-pc.is-sel{ border-color:var(--ember-dim); }
.cf-pc.is-on{ border-color:var(--ember); box-shadow:0 0 0 3px rgba(209,170,141,.12); }
.cf-pc header{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.cf-pc h3{ margin:0; font-size:1rem; font-weight:600; }
.pc-mode{ font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ember); white-space:nowrap; }
.pc-rn{ margin:2px 0 0; font-size:1.2rem; font-weight:700; letter-spacing:.01em; }
.pc-nm{ margin:0; font-size:.82rem; color:var(--text-muted); }
.pc-tip{ margin:0 0 6px; font-size:.78rem; color:var(--text-faint); line-height:1.5; flex:1; }
.pc-play{ align-self:flex-start; }


/* responsivo */
@media (max-width:1040px){
  .cf-grid{ grid-template-columns:1fr; }
  .cf-wheel{ max-width:560px; margin:0 auto; width:100%; }
  .cf-prog-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:720px){
  .cf{ padding-top:24px; }
  .cf-controls{ grid-template-columns:1fr 1fr; }
  .cf-controls .field:first-child{ grid-column:1 / -1; }
  .cf-modes-row{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .cf-modes-row::before{ display:none; }
  .cf-chords{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .cf-prog-grid{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .cf-controls{ grid-template-columns:1fr; }
  .cf-mode .m-name{ font-size:.8rem; }
}
@media (max-width:720px){
  .cf-notes{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
  .cf-notes li{ min-width:0; padding:6px 2px; }
}

/* texto de apoio (pesquisa): como ler o círculo */
.cf-learn{ margin-top:52px; padding-top:30px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 40px; }
.cf-learn h2{ grid-column:1 / -1; font-family:var(--font-display); font-weight:400; font-size:2rem; line-height:1; margin:0 0 8px; }
.cf-learn h3{ font-size:1rem; font-weight:600; color:var(--ember); margin:14px 0 4px; }
.cf-learn p{ margin:0; font-size:.9rem; line-height:1.65; color:var(--text-muted); }
@media (max-width:720px){ .cf-learn{ grid-template-columns:1fr; } }

/* barra de baixo: transporte das progressões + Practice rig */
.cf-dock .metro-dock-inner{ gap:16px; }
.cf-transport{ display:flex; align-items:center; gap:12px; flex:0 0 auto; min-width:0; }
.cf-transport .play-btn{ min-width:96px; justify-content:center; }
.cf-now{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.cf-now-k{ font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.cf-now b{ font-size:.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.cf-dock-bpm{ display:flex; align-items:center; gap:9px; flex:1 1 auto; min-width:0; max-width:360px; }
.cf-dock-bpm input{ flex:1 1 auto; min-width:60px; accent-color:var(--ember); }
.cf-dock-rh{ flex:0 0 auto; }
.cf-dock-rh select{ padding:7px 30px 7px 12px; font-size:.82rem; }
@media (max-width:860px){ .cf-dock-bpm input{ display:none; } .cf-dock-bpm{ flex:0 0 auto; } }
@media (max-width:560px){
  .cf-now{ display:none; }
  .cf-dock .metro-dock-inner{ gap:10px; justify-content:space-between; }
  .cf-transport .play-btn{ min-width:0; }
}

/* cabeçalho: atalho para o mapa do braço ao lado do idioma (mesmo botão do blog) */
.cf-page .site-header .hdr-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.cf-page .hdr-tool{
  display:inline-flex; align-items:center; height:34px; padding:0 15px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--ember-dim); color:var(--ember); font-size:0.82rem; font-weight:600; text-decoration:none;
  transition:background-color 0.18s ease, color 0.18s ease;
}
.cf-page .hdr-tool:hover, .cf-page .hdr-tool:focus-visible{ background:var(--ember); color:#121212; }
@media (max-width:720px){
  .cf-page .site-header .hdr-actions{ gap:8px; }
  .cf-page .hdr-tool{ height:32px; padding:0 11px; font-size:0.76rem; }
}

/* outras escalas (sobre um modo-base) */
.cf-modes{ margin-bottom:12px; }
.cf-scales{ display:flex; align-items:center; gap:10px 14px; margin-bottom:28px; }
.cf-scales-k{ flex:0 0 auto; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.cf-scales-row{ flex:1 1 auto; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
.cf-mode.is-base{ border-color:var(--ember); color:var(--text); background:rgba(209,170,141,.08); }
.cf-mode.is-base .m-char{ color:var(--ember); }
/* acordes emprestados: fora da cunha, contorno tracejado */
.cf-seg.is-borrow path{ fill:#33271f; stroke:var(--ember); stroke-width:2; stroke-dasharray:6 4; }
.cf-seg.is-borrow .t-main{ fill:#fff; }
.cf-seg.is-borrow.is-tonic path{ fill:var(--ember); }
.cf-chord.is-borrow{ border-style:dashed; border-color:var(--ember); }
.fr-m.is-borrow{ box-shadow:0 0 0 2px #121212, 0 0 0 3px var(--ember); }
.lg-borrow{ background:#33271f; border:1.5px dashed var(--ember); height:10px; }
.cf-chords{ grid-template-columns:repeat(var(--n, 7), minmax(0, 1fr)); }
/* blue note (♭5 do blues) */
.cf-notes li.is-blue{ border:1px dashed var(--ember); background:transparent; }
.cf-notes li.is-blue span{ color:var(--ember); white-space:nowrap; }
.fr-blue{ position:relative; z-index:1; width:26px; height:26px; margin:5px 0 2px; display:grid; place-items:center; border-radius:50%;
  border:1.5px dashed var(--ember); background:#121212; color:var(--ember); font-size:.62rem; font-weight:700; }
@media (max-width:720px){
  .cf-scales{ flex-direction:column; align-items:stretch; }
  .cf-scales-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cf-xs .m-name{ white-space:normal; text-align:center; line-height:1.2; }
  .cf-chords{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/* cunha arrastável: mão aberta por cima dela, mão fechada a rodar; a cunha engrossa para mostrar que se agarra */
#cfSvg.cf-grab, #cfSvg.cf-grab .cf-seg{ cursor:grab; }
#cfSvg.cf-dragging, #cfSvg.cf-dragging .cf-seg{ cursor:grabbing; }
#cfSvg.cf-dragging{ user-select:none; -webkit-user-select:none; }
.cf-wedge{ transition:stroke-width .15s ease; }
#cfSvg.cf-grab .cf-wedge, #cfSvg.cf-dragging .cf-wedge{ stroke-width:4; filter:drop-shadow(0 0 6px rgba(209,170,141,.45)); }
@media (prefers-reduced-motion:reduce){ .cf-wedge{ transition:none; } }