/* =========================================================
   PAGE 03 — OCTAVE / GEOMETRIC PROGRESSION
   ========================================================= */

.progression-shell{
  padding:16px;
  border:1px solid var(--tl-line,#596163);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),
    var(--tl-panel-2,#383e40);
  color:var(--tl-cream,#eadfc8);
}

.octave-block,
.formula-block,
.progression-description{
  border:1px solid var(--tl-line,#596163);
  border-radius:10px;
  background:var(--tl-panel,#303638);
}

.octave-block{
  padding:14px;
}

.octave-head,
.formula-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
}

.octave-head>div,
.formula-head{
  display:grid;
  gap:3px;
}

.octave-head span,
.formula-head span{
  color:var(--tl-muted,#aea491);
  font-size:.68rem;
}

.octave-head strong,
.formula-head strong{
  color:var(--tl-cream,#eadfc8);
  font-size:1rem;
  font-weight:850;
}

.octave-head small{
  color:var(--tl-muted,#aea491);
  font-size:.72rem;
  text-align:right;
}

/* ---------- octave scale ---------- */

.octave-scale-wrap{
  margin-top:12px;
  overflow:hidden;
  border:1px solid rgba(231,217,186,.10);
  border-radius:9px;
  background:rgba(255,255,255,.012);
}

.octave-scale{
  position:relative;
  min-height:310px;
  padding:14px 22px 20px;
}

.tet-caption,
.natural-caption{
  display:flex;
  align-items:baseline;
  gap:9px;
}

.tet-caption span,
.natural-caption span{
  font-size:.72rem;
  font-weight:900;
}

.tet-caption span{ color:#c7d0cf; }
.natural-caption span{ color:var(--tl-copper-2,#bf8060); }

.tet-caption strong,
.natural-caption strong{
  color:var(--tl-muted,#aea491);
  font-size:.68rem;
  font-weight:700;
}

.tet-line{
  display:grid;
  grid-template-columns:repeat(13,1fr);
  align-items:start;
  position:relative;
  margin-top:10px;
  min-height:92px;
}

.tet-line::before{
  content:"";
  position:absolute;
  left:calc(100% / 26);
  right:calc(100% / 26);
  top:19px;
  height:2px;
  background:#bbc4c2;
  opacity:.7;
}

.tet-node{
  position:relative;
  display:grid;
  justify-items:center;
  gap:4px;
  z-index:2;
}

.tet-node .tick{
  width:8px;
  height:8px;
  margin-top:15px;
  border-radius:50%;
  background:#d7dfdd;
  box-shadow:0 0 0 3px #303638;
}

.tet-node strong{
  order:-1;
  color:var(--tl-cream,#eadfc8);
  font-size:.72rem;
  font-weight:850;
  white-space:nowrap;
}

.tet-node small{
  color:var(--tl-muted,#aea491);
  font-size:.60rem;
}

.natural-caption{
  margin-top:6px;
}

.natural-line{
  position:relative;
  height:130px;
  margin:8px calc(100% / 26) 0;
}

.natural-base-line{
  position:absolute;
  left:0;
  right:0;
  top:53px;
  height:2px;
  background:var(--tl-copper-2,#bf8060);
  opacity:.42;
}

.natural-marker{
  position:absolute;
  left:var(--pos);
  top:0;
  transform:translateX(-50%);
  display:grid;
  justify-items:center;
  gap:5px;
}

.natural-marker.level-1{
  top:62px;
}

.natural-marker i{
  width:3px;
  height:50px;
  background:var(--tl-copper-2,#bf8060);
  border-radius:3px;
}

.natural-marker.level-1 i{
  height:28px;
}

.natural-marker b{
  padding:3px 5px;
  border:1px solid rgba(191,128,96,.30);
  border-radius:5px;
  background:#303638;
  color:var(--tl-cream,#eadfc8);
  font-size:.62rem;
  white-space:nowrap;
}

/* ---------- octave logic ---------- */

.octave-logic{
  display:grid;
  grid-template-columns:1fr auto 1.25fr auto 1.65fr;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

.logic-step{
  display:grid;
  gap:5px;
  padding:10px 11px;
  border:1px solid rgba(231,217,186,.09);
  border-radius:8px;
  background:rgba(255,255,255,.012);
  text-align:center;
}

.logic-step span{
  color:var(--tl-muted,#aea491);
  font-size:.67rem;
}

.logic-step strong{
  color:var(--tl-cream,#eadfc8);
  font-size:.92rem;
}

.logic-step.accent{
  border-color:rgba(191,128,96,.38);
}

.octave-logic>b{
  color:var(--tl-copper-2,#bf8060);
  font-size:1rem;
}

/* ---------- formulas ---------- */

.formula-block{
  margin-top:10px;
  padding:13px 14px;
}

.formula-head{
  display:grid;
}

.formula-grid{
  display:grid;
  grid-template-columns:.85fr 1.35fr 1fr;
  gap:8px;
  margin-top:10px;
}

.formula-grid article{
  display:grid;
  gap:5px;
  padding:10px 11px;
  border:1px solid rgba(231,217,186,.09);
  border-radius:8px;
  background:rgba(255,255,255,.012);
}

.formula-grid span{
  color:var(--tl-muted,#aea491);
  font-size:.67rem;
}

.formula-grid strong{
  color:var(--tl-cream,#eadfc8);
  font-size:.88rem;
  text-align:center;
}

.formula-grid mjx-container{
  margin:.25em 0 !important;
}

/* ---------- description ---------- */

.progression-description{
  margin-top:10px;
  overflow:hidden;
}

.progression-description summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 13px;
  list-style:none;
  cursor:pointer;
}

.progression-description summary::-webkit-details-marker{
  display:none;
}

.progression-description summary>span{
  color:var(--tl-cream,#eadfc8);
  font-size:.88rem;
  font-weight:850;
}

.progression-description summary>small{
  margin-left:auto;
  color:var(--tl-muted,#aea491);
  font-size:.70rem;
}

.progression-description summary::after{
  content:"+";
  color:var(--tl-copper-2,#bf8060);
  font-weight:900;
}

.progression-description[open] summary::after{
  content:"−";
}

.description-body{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:11px 13px 14px;
  border-top:1px solid rgba(255,255,255,.05);
}

.description-body p{
  margin:0;
  color:var(--tl-cream-2,#d5c8af);
  font-size:.88rem;
  line-height:1.58;
}

/* Responsive */
@media(max-width:900px){
  .octave-scale-wrap{
    overflow-x:auto;
  }

  .octave-scale{
    min-width:980px;
  }

  .octave-logic{
    grid-template-columns:1fr;
  }

  .octave-logic>b{
    transform:rotate(90deg);
    text-align:center;
  }

  .formula-grid{
    grid-template-columns:1fr;
  }

  .description-body{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   INTERVAL NAMES — simple hover/focus tooltip
   ========================================================= */

.tet-node,
.natural-marker{
  cursor:default;
  outline:none;
}

.interval-tooltip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translate(-50%,4px);
  z-index:30;
  padding:5px 8px;
  border:1px solid rgba(231,217,186,.18);
  border-radius:6px;
  background:#24292a;
  color:var(--tl-cream,#eadfc8);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  font-size:.68rem;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease, visibility .12s;
}

.tet-node:hover .interval-tooltip,
.tet-node:focus .interval-tooltip,
.natural-marker:hover .interval-tooltip,
.natural-marker:focus .interval-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.natural-marker.level-1 .interval-tooltip{
  bottom:auto;
  top:calc(100% + 7px);
}

.tet-node:hover .tick,
.tet-node:focus .tick{
  background:var(--tl-copper-2,#bf8060);
}

.natural-marker:hover i,
.natural-marker:focus i{
  box-shadow:0 0 0 2px rgba(191,128,96,.20);
}